Jako programista stron internetowych często pracujesz z elementami HTML, które, w przeciwieństwie do elementu `img`, nie mają z natury stałego rozmiaru ani proporcji. Często chcesz, aby te obiekty zachowywały się responsywnie, zachowując jednocześnie proporcje między szerokością a wysokością. CSS domyślnie nie oferuje intuicyjnego rozwiązania. Jednak właściwość pionowego wypełnienia (vertical padding) może to osiągnąć.
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 stworzyć inne współczynniki kształtu? Kluczem do tego jest właściwość padding, która - podana w wartościach procentowych - jest zawsze oparta na tej samej wartości podstawowej co właściwość Width (czyli szerokość elementu nadrzędnego). W przypadku padding-left i padding-right jest to oczywiste, a dopełnienie-top i padding-bottom zaskakujące, 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: