В этой статье от июля 2013 г. описан метод использования псевдоэлементов для поддержания соотношения сторон элементов даже при его масштабировании.
Вот миксин Sass, который немного упрощает математику.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )Примесь предполагает, что вы будете вкладывать элемент с классом содержимого в свой начальный блок. Так:
insert content here this will maintain a 16:9 aspect ratio Использовать миксин очень просто:
.sixteen-nine ( @include aspect-ratio(16, 9); )Результат:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Демо
Вот демонстрация, показывающая приведенный выше код в действии. Добавлена анимация, чтобы показать элемент, сохраняющий назначенное соотношение сторон при изменении размера.
См. Демонстрацию Pen Maintain Aspect Ratio от Шона Демпси (@seanseansean) на CodePen.
Спасибо Шону Демпси (@thatseandempsey) за это!