Este artículo de julio de 2013 describe un método para usar elementos psuedo para mantener la relación de aspecto de los elementos, incluso cuando se escala.
Aquí hay una mezcla de Sass que simplifica un poco las matemáticas.
@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; ) )El mixin asume que anidará un elemento con la clase de contenido dentro de su bloque inicial. Como esto:
insert content here this will maintain a 16:9 aspect ratio Usar el mixin es tan fácil como:
.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; )Manifestación
Aquí hay una demostración que muestra el código anterior en acción. La animación se agrega para mostrar el elemento manteniendo la relación de aspecto asignada a medida que cambia de tamaño.
Vea la demostración de la relación de aspecto de mantenimiento del lápiz de Sean Dempsey (@seanseansean) en CodePen.
¡Gracias a Sean Dempsey (@thatseandempsey) por este!