¿Cómo calcular ratio de imagen en CSS?

Hoy en día, Google se toma muy en serio las métricas y entre ellas el CLS (Cumulative Layout Shift o en esañol «Cambio Acumulativo del diseño»), y esto es para cuidar el cambio de tamaños de los componentes en el sitio web durante la carga de la página web. Por eso, es importante cuidar que los tamaños de las imágenes sean responsivos y correctamente proporcionales sin importar el tamaño del dispositivo.

<div class="contenedor">
  <img src="urldelaimagen.jpg">
</div>

Vamos a tomar en cuenta que la imagen que utilizaremos mide 220px de ancho por 140px de alto, para calcular el ratio utilizaremos una fórmula: R = Ancho / Alto * 100, que en este caso daría un resultado de 63.63636363636364, este lo utilizaremos de porcentaje.

.contenedor {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 63.63636363636364%;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Con esto bastaría para que la imagen sea responsiva en cuanto al ancho y alto, solo faltaría ponerlo dentro de un <figure> y este a su vez asignarle las reglas responsivas si es que necesitaramos la imagen para un tipo de «grill», algo así:

.grill{
    display:flex;
    box-sizing:border-box;
    flex-wrap: wrap;
}

figure{
    position: relative;
    flex-basis: 25%;
}

Ahora el código HTML completo quedaría algo así:

<div class="grill">
    <figure>
        <div class="contenedor">
            <img src="urldelaimagen.jpg">
        </div>
    </figure>
    <figure>
        <div class="contenedor">
            <img src="urldelaimagen.jpg">
        </div>
    </figure>
    <figure>
        <div class="contenedor">
            <img src="urldelaimagen.jpg">
        </div>
    </figure>
    <figure>
        <div class="contenedor">
            <img src="urldelaimagen.jpg">
        </div>
    </figure>
</div>

Así que, si estás buscando cómo conseguir que las imagenes cambien de tamaño proporcionalmente con CSS, sin importar el tamaño de la pantalla del dispositivo… Creo que esto puede servirte.

Saludos 🙂