Cómo escalar y recortar imágenes con CSS object-fit

Introducción

Probablemente te encontrarás con una situación en la que querrás conservar la relación de aspecto original al trabajar con imágenes. Conservar la relación de aspecto evitará que las imágenes aparezcan distorsionadas, ya sea por estar estiradas o aplastadas. Una solución habitual para este problema es utilizar la background-imagepropiedad CSS. Un enfoque más moderno sería utilizar la object-fitpropiedad CSS.

En este artículo, explorará los efectos de los valores fill, cover, contain, noney scale-downdisponibles para la object-fitpropiedad CSS y cómo puede recortar y escalar imágenes. También explorará la object-positionpropiedad CSS y cómo puede desplazar imágenes.

Implemente sus aplicaciones frontend desde GitHub con la plataforma de aplicaciones DigitalOcean . Deje que DigitalOcean se concentre en escalar su aplicación.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Comprender las propiedades y valores de CSS .
• Usando declaraciones CSS en línea con la stylepropiedad .
• Un editor de código.
• Un navegador web moderno que admite object-fity object-position.

Observación del comportamiento predeterminado de una imagen de muestra

Considere el siguiente código utilizado para mostrar una imagen de muestra:

img  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"  width="600"  height="337"  style="width: 600px; height: 337px;"  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."/

Este código producirá el siguiente resultado en el navegador:

Esta imagen tiene un ancho original de 1200 px y una altura de 674 px. Mediante imgatributos, se ha establecido el ancho en 600y 337(la mitad de las dimensiones originales) conservando la relación de aspecto.

Ahora, considere una situación donde el diseño espera que las imágenes ocupen un ancho de 300 px y una altura de 337 px:

img  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"     alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."/

Este código producirá el siguiente resultado en el navegador:

La imagen resultante ya no conserva la relación de aspecto original y parece visualmente “aplastada”.

Usandoobject-fit: fill

El fillvalor es el valor inicial de object-fit. Este valor no conservará la relación de aspecto original.

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

Como este es el valor “inicial” para los motores de renderizado de los navegadores, no hay cambios en la apariencia de la imagen escalada. La imagen resultante todavía aparece aplastada.

Usandoobject-fit: cover

El covervalor conserva la relación de aspecto original, pero la imagen ocupa todo el espacio disponible.

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En determinadas situaciones, object-fit: coverla imagen aparecerá recortada. En esta imagen de ejemplo, algunas partes de la imagen original a la izquierda y a la derecha no aparecen porque no caben dentro de los límites del ancho declarado.

Usandoobject-fit: contain

El containvalor conserva la relación de aspecto original, pero la imagen también está restringida para no exceder los límites del espacio disponible.

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En determinadas situaciones, object-fit: containla imagen no ocupará todo el espacio disponible. En esta imagen de ejemplo, hay espacio vertical por encima y por debajo de la imagen porque la altura declarada es mayor que la altura reducida.

Usandoobject-fit: none

El nonevalor no cambia el tamaño de la imagen en absoluto.

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En situaciones en las que la imagen es más grande que el espacio disponible, aparecerá recortada. En esta imagen de ejemplo, algunas partes de la imagen original en los lados izquierdo, derecho, superior e inferior no aparecen porque no caben dentro de los límites del ancho y alto declarados.

Usandoobject-fit: scale-down

El scale-downvalor mostrará una imagen como containo, nonedependiendo del caso, la imagen sería más pequeña.

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En esta imagen de ejemplo, la imagen se ha reducido para que se comporte como contain.

Usando object-fityobject-position

Si la imagen resultante object-fitaparece recortada, de forma predeterminada aparecerá centrada. La object-positionpropiedad se puede utilizar para cambiar el punto de enfoque.

Consideremos el object-fit: coverejemplo anterior:

Ahora cambiemos la posición de la parte visible de la imagen en el eje X para revelar el borde más a la derecha de la imagen:

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En esta imagen de ejemplo, la tortuga ha sido recortada de la imagen.

Y finalmente, observemos qué sucede si la posición se especifica fuera de los límites del espacio disponible:

img  ...   .../

Este código producirá el siguiente resultado en el navegador:

En esta imagen de ejemplo, se han recortado las cabezas de la tortuga y del caimán. También hay un espacio para compensar el 20 % de desplazamiento a la izquierda de la imagen.

Conclusión

En este artículo, exploró los valores disponibles para las propiedades CSS object-fity object-position.

object-fitTambién admite herencia, inicial y no establecida .

Antes de usarlo object-fiten su proyecto, verifique que sea compatible con los navegadores utilizados por el público al que se dirige consultando la compatibilidad del navegador en ¿Puedo usarlo ?.

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.