La propiedad CSS object-fit se usa para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor.

La propiedad de ajuste de objeto CSS

La propiedad CSS object-fit se usa para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor.

Esta propiedad le dice al contenido que llene el contenedor de varias maneras; como «preservar esa relación de aspecto» o «estirar y ocupar tanto espacio como sea posible».

Valores

La object-fitpropiedad puede tomar uno de los siguientes valores:

• fill– Esto es predeterminado. La imagen se redimensiona para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa
• contain– La imagen mantiene su relación de aspecto, pero se redimensiona para ajustarse a la dimensión dada
• cover– La imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para que quepa
• none– La imagen no cambia de tamaño
• scale-down– la imagen se reduce a la versión más pequeña de noneo contain

fill

Esto es predeterminado. La imagen se redimensiona para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa.

<img style="object-fit: fill;" width="250px" height="350px" src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg" />

Vista previa:

contain

La imagen mantiene su relación de aspecto, pero se redimensiona para ajustarse a la dimensión dada.

<img style="object-fit: contain;" width="250px" height="350px" src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg" />

Vista previa:

cover

La imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para que quepa.

<img style="object-fit: cover;" width="250px" height="350px" src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg" />

Vista previa:

none

La imagen no cambia de tamaño.

<img style="object-fit: none;" width="250px" height="350px" src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg" />

Vista previa:

scale-dow

La imagen se reduce a la versión más pequeña de none o contain.

<img style="object-fit: scale-dow;" width="250px" height="350px" src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg" />

Vista previa: