Este artigo de julho de 2013 descreve um método de uso de elementos psuedo para manter uma proporção de aspecto dos elementos, mesmo durante sua escala.
Aqui está um mixin Sass que simplifica um pouco a matemática.
@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; ) )O mixin assume que você aninhará um elemento com a classe de conteúdo dentro de seu bloco inicial. Como isso:
insert content here this will maintain a 16:9 aspect ratio Usar o mixin é tão fácil quanto:
.sixteen-nine ( @include aspect-ratio(16, 9); )Resultado:
.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; )Demo
Aqui está uma demonstração que mostra o código acima em ação. A animação é adicionada para mostrar o elemento que mantém a proporção atribuída à medida que é redimensionado.
Veja a demonstração Pen Maintain Aspect Ratio de Sean Dempsey (@seanseansean) no CodePen.
Obrigado a Sean Dempsey (@thatseandempsey) por este!