Alinear imágenes de diferentes tamaños con la propiedad object-fit de CSS – Vertegrande

Contanos tu Proyecto. Esto puede ser el principio de una gran aventura. Hablemos

Alinear imágenes de diferentes tamaños con la propiedad object-fit de CSS

Simple Tips – En algunas oportunidades nos topamos con la necesidad de alinear imágenes de diferentes tamaños a una sola medida, tanto horizontal como verticalmente para simplificar la estructura de diseño.

Publicado el 19 noviembre, 2021


En algunas oportunidades nos topamos con la necesidad de alinear imágenes de diferentes tamaños a una sola medida, tanto horizontal como verticalmente para simplificar la estructura de diseño o la carga de images de las personas que luego administraran ese desarrollo web.

Problema

Si nosotros forzamos un ancho o un alto fijo de imágenes de diferentes proporciones éstas se distorsionarán.

Por ello, si cambiamos el ancho y alto de las imágenes a 250px conseguimos el siguiente resultado distorsionado:

img {
height: 250px;
width: 250px;
}

Solución

Añadimos la propiedad object-fit con valor cover:

img {
height: 250px;
width: 250px;
object-fit: cover;
}

Otra implementación estándar que podrías encontrar dentro de tu CSS;

figure {
    width: 100%;
    height: 400px;
}
figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

y codigo

<figure>
    <img alt="This is an image" src="/image.jpg">
</figure>