Как веб-разработчик, часто бывает неловко работать с элементами HTML, которые сами по себе - в отличие, например, от элемента img - не имеют ни фиксированного размера, ни фиксированного соотношения сторон. Часто требуется добиться, чтобы эти объекты вели себя отзывчиво, но при этом сохраняется пропорция между шириной и высотой. CSS по умолчанию не предлагает здесь интуитивно понятного решения. Но с помощью свойства vertical padding вы можете достичь своей цели.
Давайте возьмем повседневный пример квадратных изображений статей, графика которых не обязательно квадратная, но мы хотели бы отображать их с соотношением сторон 1: 1 без дополнительных усилий и, прежде всего, без искажений, в результате чего их ширина (и, следовательно, также высота) изменяется быстро. должен. С помощью следующего кода это очень легко сделать без дополнительной разметки с помощью CSS.:
1bc3a80de3db90cdf0535541236d95f2
с результатом
Но почему это работает и как можно создать другие соотношения сторон? Ключ к этому лежит в свойстве padding, которое - в процентных значениях - всегда основано на том же базовом значении, что и свойство Width (а именно, ширина родительского элемента). С padding-left и padding-right это очевидно, с padding-top и padding-bottom удивительно, но очень полезно в этом случае.
Например, если вам нужно соотношение сторон 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
Это приводит к следующему результату: