La propiedad CSS
object-fitse usa para especificar cómo se debe cambiar el tamaño de una<img>o<video>para que se ajuste a su contenedor.
La propiedad object-fit
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".
Mira la siguiente imagen de París. Esta imagen tiene 400 píxeles de ancho y 300 píxeles de alto:
Sin embargo, si diseñamos la imagen de arriba para que tenga la mitad de su ancho (200 píxeles) y la misma altura (300 píxeles), se verá así:
Ejemplo:
img {
width: 200px;
height: 300px;
}
Vemos que la imagen se aplasta para ajustarse al contenedor de 200x300 píxeles (su relación de aspecto original se destruye).
Aquí es donde entra en juego la propiedad object-fit. La propiedad object-fit 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 denoneocontain.
Uso de object-fit: cover;
Si usamos object-fit: cover; la imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para que quepa:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: cover;
}
Uso de object-fit: contain;
Si usamos object-fit: contain; la imagen mantiene su relación de aspecto, pero se redimensiona para ajustarse a la dimensión dada:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: contain;
}
Uso de object-fit: fill;
Si usamos object-fit: fill; la imagen se redimensiona para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: fill;
}
Uso de object-fit: none;
Si usamos object-fit: none; la imagen no cambia de tamaño:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: none;
}
Uso de object-fit: scale-down;
Si usamos object-fit: scale-down; la imagen se reduce a la versión más pequeña de none o contiain:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: scale-down;
}
Otro ejemplo
Aquí tenemos dos imágenes y queremos que ocupen el 50% del ancho de la ventana del navegador y el 100% del alto.
En el siguiente ejemplo, NO usamos object-fit, por lo que cuando cambiamos el tamaño de la ventana del navegador, la relación de aspecto de las imágenes se destruirá:
Ejemplo:
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>
En el siguiente ejemplo, usamos object-fit: cover;, por lo que cuando cambiamos el tamaño de la ventana del navegador, se conserva la relación de aspecto de las imágenes:
Ejemplo:
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
Más ejemplos object-fit
El siguiente ejemplo demuestra todos los valores posibles de la propiedad object-fit en un ejemplo:
Ejemplo:
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Propiedades Object
La siguiente tabla enumera las propiedades objetc:
| Propiedad | Descripción |
object-fit | Especifica cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor. |
object-position | Especifica cómo debe colocarse una <img> o <video> con las coordenadas x/y dentro de su "propio cuadro de contenido". |
Traducido con 💚 desde W3Schools.com