У цій статті від липня 2013 року описується метод використання елементів psuedo для підтримання співвідношення сторін елементів, навіть коли він масштабується.
Ось мікс 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; )Демо
Ось демонстрація, що показує вищевказаний код у дії. Анімація додана, щоб показати елемент, що зберігає призначене співвідношення сторін, коли він змінюється.
Дивіться демонстрацію співвідношення аспектів перу від Шона Демпсі (@seanseansean) на CodePen.
Дякую Шону Демпсі (@thatseandempsey) за це!