Propriedade de posição de objeto CSS

Índice

A propriedade CSS object-position é usado para especificar como um <img> ou <video> deve ser posicionado dentro de seu contêiner.

A imagem

Veja a seguinte imagem de Paris, que tem 400x300 pixels:

A seguir, usamos a propriedade CSS

object-fit: cover;

para manter a proporção e preencher a dimensão fornecida. No entanto, a imagem será cortada para caber, assim:

Exemplo

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

Experimente você mesmo →

<!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 a propriedade object-position

Digamos que a parte da imagem que é mostrada não esteja posicionada como desejamos. Para posicionar a imagem, usaremos a propriedade object-position.

Aqui usaremos a propriedade object-position para posicionar a imagem de forma que o grande edifício antigo fique no centro:

Exemplo

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

Experimente você mesmo →

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

Aqui usaremos a propriedade object-position para posicionar a imagem de forma que a famosa Torre Eiffel fique no centro:

Exemplo

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

Experimente você mesmo →

<!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-* Propriedades

A tabela a seguir lista as propriedades CSS object-*:

object-fit: Especifica como um <img> ou <video> deve ser redimensionado para caber em seu contêiner
object-position: Especifica como um <img> ou <video> deve ser posicionado com x/y coordenadas dentro de sua "própria caixa de conteúdo"