Propiedad CSS object-fit
La propiedad object-fit se utiliza para especificar cómo un elemento debe redimensionarse para ajustarse a su caja de contenido.
La propiedad object-fit permite ajustar el contenido de una imagen a las dimensiones especificadas en la hoja de estilos.
El contenido puede configurarse para escalar hacia arriba o hacia abajo, encogerse o estirarse para ajustarse al ancho y alto especificados mediante los valores de la propiedad. Hay cinco valores:
- fill
- contain
- cover
- none
- scale-down
| Valor inicial | fill |
|---|---|
| Se aplica a | Elementos reemplazados. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.objectFit = "cover"; |
Sintaxis
Sintaxis de CSS object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Ejemplo de la propiedad object-fit con el valor "fill":
Ejemplo de la propiedad object-fit con el valor "fill":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Resultado
Aquí, la imagen con el valor aplicado se estira para ajustarse a la caja. En el siguiente ejemplo, el valor "cover" recorta los lados de una imagen, conserva la relación de aspecto y también llena el espacio.
Ejemplo de la propiedad object-fit con el valor "cover":
Ejemplo de la propiedad object-fit con el valor "cover":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>En el siguiente ejemplo, la imagen con el valor aplicado conserva la relación de aspecto de la imagen original.
Ejemplo de la propiedad object-fit con el valor "contain":
Ejemplo de la propiedad object-fit con el valor "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>En nuestro último ejemplo, el valor aplicado establece la imagen en un tamaño más pequeño como si se hubiera especificado "contain" o "none".
Ejemplo de la propiedad object-fit con el valor "scale-down":
Ejemplo de CSS object-fit scale-down
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| fill | El contenido se redimensiona tanto como sea necesario para llenar la caja de contenido. Este es el valor predeterminado de esta propiedad. |
| contain | La relación de aspecto del contenido se escala hacia arriba tanto como sea posible mientras permanece contenida dentro de los límites del elemento. |
| cover | La relación de aspecto del contenido se ajusta mientras llena la caja de contenido del elemento. Se recortará para ajustarse a la caja de contenido. |
| none | Sin redimensionar el contenido. |
| scale-down | Igual que los valores none o contain. El contenido del elemento estará en un tamaño más pequeño. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son los valores posibles para la propiedad 'object-fit' en CSS?