Propriedade de ajuste de objeto CSS

Índice

    Mostrar índice

A propriedade CSS object-fit é usada para especificar como um <img> ou <video> deve ser redimensionado para caber em seu contêiner.

A propriedade de ajuste de objeto CSS

A propriedade CSS object-fit é usada para especificar como um <img> ou <video> deve ser redimensionado para caber em seu contêiner.

Essa propriedade informa ao conteúdo para preencher o contêiner de diversas maneiras; como "preservar essa proporção" ou "esticar e ocupar tanto espaço quanto possível".

Veja a seguinte imagem de Paris. Esta imagem tem 400 pixels de largura e 300 pixels de altura:

Paris

No entanto, se estilizarmos a imagem acima com metade de sua largura (200 pixels) e a mesma altura (300 pixels), ela ficará assim:

Paris

Exemplo

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

Experimente você mesmo →

<!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 a imagem está sendo comprimida para caber no contêiner de 200x300 pixels (sua proporção original é destruída).

É aqui que vem a propriedade object-fit in. A propriedade object-fit pode assumir um dos seguintes valores:

  • preencher - Este é o padrão. A imagem é redimensionada para preencher o dada dimensão. Se necessário, a imagem será esticada ou comprimida para caber

  • conter - A imagem mantém sua proporção, mas é redimensionado para caber na dimensão especificada

  • capa - A imagem mantém sua proporção e preenche a dimensão dada. A imagem será cortada para caber

  • none - A imagem não foi redimensionada

  • redução de escala - a imagem é reduzido para a menor versão de none ou contém

Usando object-fit: cover;

Se usarmos object-fit: cover; a imagem mantém sua proporção e preenche a dimensão dada. A imagem será cortada para caber:

Paris

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 ajuste de objeto: contém;

Se usarmos object-fit: contains; a imagem mantém sua proporção, mas é redimensionada para caber na dimensão fornecida:

Paris

Exemplo

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

Experimente você mesmo →

<!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: preenchimento;

Se usarmos object-fit: fill; a imagem é redimensionada para preencher a dimensão fornecida. Se necessário, a imagem será esticada ou comprimida para caber:

Paris

Exemplo

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

Experimente você mesmo →

<!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: nenhum;

Se usarmos object-fit: none; a imagem não é redimensionada:

Paris

Exemplo

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

Experimente você mesmo →

<!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: redução de escala;

Se usarmos object-fit: scale-down; a imagem será reduzida para a menor versão de none ou contém:

Paris

Exemplo

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

Experimente você mesmo →

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

Outro exemplo

Aqui temos duas imagens e queremos que elas preencham 50% da largura da janela do navegador e 100% da altura.

No exemplo a seguir NÃO usamos object-fit, portanto, quando redimensionarmos a janela do navegador, a proporção das imagens será destruída:

Exemplo

Norway Paris

Experimente você mesmo →

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

No próximo exemplo, usamos object-fit: cover;, portanto, quando redimensionamos a janela do navegador, a proporção das imagens é preservada:

Exemplo

Norway Paris

Experimente você mesmo →

<!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 objeto CSS Mais exemplos

O exemplo a seguir demonstra todos os valores possíveis da propriedade object-fit em um exemplo:

Exemplo

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Experimente você mesmo →

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