Тази статия от юли 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; ) )Mixin предполага, че ще влагате елемент с класа на съдържанието във вашия първоначален блок. Като този:
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) за това!