Propiedad de posición de objeto CSS

Tabla de contenido

La propiedad CSS posición-objeto se utiliza para especificar cómo se debe colocar un <img> o un <video> dentro de su contenedor.

La imagen

Mire la siguiente imagen de París, que tiene 400x300 píxeles:

A continuación, usamos la propiedad CSS.

object-fit: cover;

para mantener la relación de aspecto y llenar la dimensión dada. Sin embargo, la imagen se recortará para que quepa, así:

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 la propiedad de posición de objeto

Digamos que la parte de la imagen que se muestra, no está posicionada como queremos. Para posicionar la imagen, usaremos la propiedad object-position.

Aquí usaremos la propiedad object-position para colocar la imagen de modo que el gran edificio antiguo esté en el centro:

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

Pruébelo usted mismo →

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

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

</body>
</html>

Aquí usaremos la propiedad object-position para colocar la imagen de modo que la famosa Torre Eiffel esté en el centro:

Ejemplo

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

Pruébelo usted mismo →

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

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

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