Propiedad de ajuste de objeto CSS

Tabla de contenido

    Mostrar tabla de contenidos

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

La propiedad de ajuste de objeto CSS

La propiedad CSS object-fit se utiliza para especificar cómo debe ser un <img> o un <video>. cambiar de tamaño 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 "estirarse y ocupar tanto espacio como sea posible". posible".

Mira la siguiente imagen de París. Esta imagen tiene 400 píxeles de ancho y 300 píxeles de alto:

Paris

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í:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:300px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Vemos que la imagen está siendo aplastada para caber en el contenedor de 200x300 píxeles. (su relación de aspecto original se destruye).

Aquí es donde viene la propiedad object-fit en. La propiedad object-fit puede tomar una de las siguientes valores:

  • relleno: esto es el valor predeterminado. La imagen cambia de tamaño para llenar el dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa

  • contiene - La imagen mantiene su relación de aspecto, pero cambia de tamaño para ajustarse a la dimensión dada

  • portada: la imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para ajustarse

  • none: la imagen no cambia de tamaño

  • reducir - la imagen es reducido a la versión más pequeña de none o contener

Usando object-fit: cubrir;

Si usamos object-fit: cover; la imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para ajustarse:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Usando object-fit: contiene;

Si usamos object-fit: contiene; la imagen mantiene su relación de aspecto, pero se cambia de tamaño para ajustarse a la dimensión dada:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: contain;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}
</style>
</head>
<body>

<h2>Using object-fit: contain</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Usando ajuste de objeto: llenar;

Si usamos object-fit: fill; la imagen cambia de tamaño para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: fill;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}
</style>
</head>
<body>

<h2>Using object-fit: fill</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Usando ajuste de objeto: ninguno;

Si usamos object-fit: none; la imagen no cambia de tamaño:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: none;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: none;
}
</style>
</head>
<body>

<h2>Using object-fit: none</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Usando ajuste de objeto: reducción de escala;

Si usamos object-fit: scale-down; la imagen se reduce a la versión más pequeña de none o contiene:

Paris

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: scale-down;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}
</style>
</head>
<body>

<h2>Using object-fit: scale-down</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Otro ejemplo

Aquí tenemos dos imágenes y queremos que ocupen el ancho del 50% 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

Norway Paris

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>

<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<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>

</body>
</html>

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

Norway Paris

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>

<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<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>

</body>
</html>

Ajuste de objetos CSS Más ejemplos

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;}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

Objeto CSS-* Propiedades

La siguiente tabla enumera las propiedades del objeto CSS-*:

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 se debe colocar un <img> o un <video> con x/y coordenadas dentro de su "propio cuadro de contenido"