Jako twórca stron internetowych często wstydzisz się pracować z elementami HTML, które same w sobie - w przeciwieństwie do na przykład elementu img - nie mają stałego rozmiaru ani współczynnika proporcji. Często chcesz, aby te obiekty zachowywały się responsywnie, ale proporcja między szerokością a wysokością zostaje zachowana. CSS domyślnie nie oferuje tutaj intuicyjnego rozwiązania. Ale z pomocą pionowej właściwości wypełnienia możesz osiągnąć swój cel.
Weźmy codzienny przykład kwadratowych obrazów artykułów, których grafika niekoniecznie jest kwadratowa, ale chcielibyśmy je wyświetlić bez dodatkowego wysiłku, a przede wszystkim bez zniekształceń przy proporcjach 1: 1, dzięki czemu ich szerokość (a tym samym wysokość) zmienia się responsywnie powinien. Z poniższym kodem bardzo łatwo jest to zrobić bez dodatkowych znaczników przy pomocy CSS:
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: