Jako twórca stron internetowych często stajesz przed dylematem pracy z elementami HTML, które – w przeciwieństwie na przykład do elementu img – nie mają ani stałego rozmiaru, ani stałego współczynnika proporcji. Często chcesz mieć pewność, że obiekty te zachowują się responsywnie, ale zachowana jest proporcja między szerokością i wysokością. Domyślnie CSS nie oferuje tutaj intuicyjnego rozwiązania. Ale za pomocą właściwości dopełnienia pionowego możesz osiągnąć swój cel.
Weźmy na przykład kwadratowe obrazy produktów. Chociaż same grafiki niekoniecznie są kwadratowe, chcielibyśmy wyświetlać je w proporcjach 1:1 bez dodatkowego wysiłku i zniekształceń, a ich szerokość (a tym samym wysokość) powinna się responsywnie zmieniać. Poniższy kod ułatwia osiągnięcie tego za pomocą CSS bez dodatkowych znaczników.:
1bc3a80de3db90cdf0535541236d95f2
z rezultatem:
Ale dlaczego to działa i jak można utworzyć inne współczynniki proporcji? Kluczem do tego jest właściwość padding, która – podana w wartościach procentowych – opiera się zawsze na tej samej wartości podstawowej, co właściwość Szerokość (mianowicie szerokość elementu nadrzędnego). Jest to oczywiste w przypadku dopełnienia po lewej i prawej stronie, zaskakujące w przypadku dopełnienia od góry i dopełnienia, ale w tym przypadku bardzo pomocne.
Na przykład, jeśli chcesz mieć współczynnik proporcji 16: 9, wybierz wartości width: 100%; padding-bottom: 56,25%;. Współczynnik proporcji uwzględniający złoty współczynnik to szerokość: 100%; padding-bottom: 61,81%; wykonalny.
Za pomocą programu calc możesz bezpośrednio określić współczynnik kształtu, na przykład dla 16: 9 z dopełnieniem-dół: calc (1 / (16/9) * 100%). Jeśli element składa się z dalszych, zagnieżdżonych elementów, element potomny jest pozycjonowany absolutnie, aby skompensować wypełnienie elementu nadrzędnego:
1bc3a80de3db90cdf0535541236d95f2
Prowadzi to do następującego wyniku: