La propiedad CSS object-fit se usa para especificar cómo se debe cambiar el tamaño de una imagen o video para que se ajuste a su cuadro de contenido. Esta propiedad especifica las diversas formas de llenar el contenido dentro del cuadro de contenido o contenedor, como conservar la relación de aspecto o estirar y levantar tanto espacio como sea posible, etc. La posición de alineación del objeto de contenido del elemento reemplazado dentro del cuadro del elemento se puede cambiar a través de la propiedad object-position .
Sintaxis:
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
relleno: Es un valor por defecto. La imagen reemplazada se estira para ajustarse al cuadro de contenido. La imagen reemplazada llenará completamente el cuadro sin importar su relación de aspecto.
Sintaxis:
object-fit: fill;
Ejemplo: Este ejemplo ilustra el uso de la propiedad object-fit cuyo valor se establece en fill.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: Fill;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
contener: la imagen reemplazada conserva la relación de aspecto de la imagen original mientras se ajusta al cuadro de contenido.
Sintaxis:
object-fit: contain;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de ajuste de objeto cuyo valor se establece para contener.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
portada: este valor también conserva la relación de aspecto de la imagen original en la imagen reemplazada mientras se ajusta en el cuadro de contenido. A veces se recorta para ajustarse cuando la relación de aspecto de la imagen original no coincide con la relación de aspecto del cuadro de contenido.
Sintaxis:
object-fit: cover;
Ejemplo: Este ejemplo ilustra el uso de la propiedad object-fit cuyo valor se establece en cover.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
ninguno: la imagen reemplazada ignorará la relación de aspecto de la imagen original. Por lo tanto, no se redimensiona.
Sintaxis:
object-fit: none;
Ejemplo: este ejemplo ilustra el uso de la propiedad object-fit cuyo valor se establece en none.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
escalar hacia abajo: la imagen reemplazada se redimensiona como si no se hubiera especificado ninguno o contiene y da como resultado el tamaño de objeto más pequeño.
Sintaxis:
object-fit: scale-down;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de ajuste de objeto cuyo valor se establece en reducción de escala.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 200px;
object-fit: scale-down;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
inicial: se utiliza para establecer el valor predeterminado, es decir, la imagen reemplazada se estira para ajustarse al cuadro de contenido a medida que se completa el valor predeterminado.
Sintaxis:
object-fit: initial;
Ejemplo: este ejemplo ilustra el uso de la propiedad object-fit cuyo valor se establece en initial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: initial;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Producción:
heredar: Inherit recibe la propiedad del elemento principal. Cuando se usa con el elemento raíz, se usará la propiedad inicial.
Sintaxis:
object-fit: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad object-fit cuyo valor se establece en heredar.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
.object {
object-fit: none;
}
img {
width: 200px;
height: 400px;
object-fit: inherit;
}
</style>
</head>
<body>
<div class="object">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</div>
<!--Here img inherits property from parent i.e none from class object-->
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Object-Fit Property se enumeran a continuación:
- Google Chrome 32.0
- Firefox 36.0
- Microsoft Edge 79.0
- Ópera 19.0
- Safari 10.0
Publicación traducida automáticamente
Artículo escrito por gribeshdhakal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA