Mixin para mantener el aspect ratio con Sass

Hoy quiero compartir un mixin con vosotros que al menos a mi me ha resultado muy util en más de un proyecto, sobre todo cuando trabajo con videos o con imágenes que necesitan mantener una relación de aspecto específica, lo que habitualmente se denomina aspect ratio.

 

Relación de aspecto o aspect ratio

La definición es bastante simple, se trata de la proporción entre ancho y alto de una imagen u otro objeto, y se calcula dividiendo el ancho de la imagen por la altura.

Comentar que las relaciones de aspecto más habituales son 4:3 y 16:9, aunque existen alguna más que también se utilizan bastante. En la siguiente imagen en la que podéis ver cuales son las más comunes.

 

relaccion-aspecto-o-aspect-ratio

 

Planteando la ecuación

En nuestro caso partiremos de que conocemos el ancho, y ya que normalmente no será un ancho fijo si no proporcional, necesitamos calcular el valor en porcentaje del alto con respecto al ancho de el objeto por lo que la ecuación si quisiésemos calcular un aspect ratio de 16:9 de una imagen con ancho x quedaría así:

9/16*100 = 56.25%

 

Creando el mixin

Teniendo clara la ecuación es bastante fácil crear un mixin que nos facilite la tarea.

Lo primero que me suelo plantear a la hora de crear un mixin es como voy a pasarle los valores que necesita, y en este caso creo que lo más sencillo es pasarlos como una lista, sin comas ni signos que separen los dos valores.

Para calcular la relación de aspecto, lo mas sencillo es utilizar el padding-bottom, por lo que nuestro mixin quedaría así.

@mixin aspect-ratio ($ratio) {
  width: 100%;
  height: 0;
  padding-bottom: percentage( nth($ratio, 2) / nth($ratio, 1))
}

.aspect-ratio-element {
  @include aspect-ratio(16 9);
  ...
}

Hay poco que explicar de este código, lo interesante es la última línea que es la que calcula el porcentaje y lo aplica al padding-bottom para conseguir que el elemento mantenga el aspecto deseado.

Para afinar un poco más el código se podría realizar una comprobación inicial para chequear que los valores que le pasamos son válidos.

He preparado este pen en el que podéis comprobar el funcionamiento.

 

Espero que os resulte tan util como a mi. 

Hasta la próxima!