Как веб-разработчик, вы часто сталкиваетесь с дилеммой работы с элементами HTML, которые, в отличие, например, от элемента img, не имеют ни фиксированного размера, ни фиксированного соотношения сторон. Часто требуется, чтобы эти объекты вели себя отзывчиво, но при этом сохранялась пропорция между шириной и высотой. По умолчанию CSS не предлагает здесь интуитивного решения. Но с помощью свойства вертикального заполнения вы можете достичь своей цели.
Рассмотрим распространенный пример квадратных изображений товаров. Хотя сами изображения не обязательно квадратные, мы хотим отображать их с соотношением сторон 1:1 без дополнительных усилий или искажений, а их ширина (и, следовательно, высота) должна изменяться адаптивно. Приведенный ниже код позволяет легко добиться этого с помощью CSS без дополнительной разметки.:
1bc3a80de3db90cdf0535541236d95f2
с результатом:
Но почему это работает и как можно создать другие соотношения сторон? Ключом к этому является свойство заполнения, которое, указанное в процентных значениях, всегда основано на том же базовом значении, что и свойство Width (а именно, на ширине родительского элемента). Это очевидно для отступов слева и справа, удивительно для отступов сверху и снизу, но очень полезно в данном случае.
Например, если вам нужно соотношение сторон 16: 9, вы выбираете значения width: 100%; padding-bottom: 56.25%;. Соотношение сторон, учитывающее золотое сечение: width: 100%, padding-bottom: 61,81%; осуществимо.
С помощью calc вы можете напрямую указать соотношение сторон, например, для 16: 9 с padding-bottom: calc (1 / (16/9) * 100%). Если элемент состоит из дополнительных, вложенных элементов, дочерний элемент позиционируется абсолютно, чтобы компенсировать отступ родительского элемента.:
1bc3a80de3db90cdf0535541236d95f2
Это приводит к следующему результату: