`object-fit` e `object-position` Propriedades

Articles

Este artigo explica as propriedades object-fit e object-position.

Você pode aprender como organizar objetos como imagens e vídeos e como escrevê-los em CSS.

YouTube Video

HTML para Visualização

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Relacionado ao Ajuste de Objetos

Propriedade `object-fit`

A propriedade CSS object-fit é usada principalmente para controlar como imagens, vídeos e outros conteúdos se ajustam dentro de seus elementos contêiner. Utilizando esta propriedade, você pode especificar de forma flexível como os elementos são redimensionados e posicionados de maneira estética. É muito útil para ajustar a exibição de imagens ou vídeos, cortando ou redimensionando quando eles não se ajustam ao elemento pai.

Valores de `object-fit`

`fill` (Valor Padrão)

1img {
2  object-fit: fill;
3}

fill é o valor padrão, onde imagens ou vídeos são esticados para se ajustar completamente à largura e altura do elemento pai. Nesse caso, a proporção original é ignorada, o que pode causar distorção na imagem.

Ele se ajusta completamente ao tamanho do elemento pai.
Como a proporção é ignorada, imagens ou vídeos podem ser esticados verticalmente ou horizontalmente.

`contain`

1img {
2  object-fit: contain;
3}

contain redimensiona o conteúdo para que ele se ajuste inteiramente ao elemento pai enquanto preserva a proporção. Não excede o tamanho do elemento pai e pode haver preenchimento nas laterais vertical ou horizontal.

Todo o conteúdo é exibido.
Para manter a proporção original, pode aparecer preenchimento (efeito letterbox ou pillarbox).

`cover`

1img {
2  object-fit: cover;
3}

cover redimensiona o conteúdo para cobrir completamente o elemento pai, mantendo a proporção. Parte do conteúdo pode ser cortada para se ajustar ao elemento pai, mas o elemento inteiro preenche o container, sem deixar espaços.

O conteúdo cobre completamente o elemento pai.
Pode ser cortado enquanto mantém a proporção original.
Comumente usado para imagens de fundo ou imagens da seção hero.

`none`

1img {
2  object-fit: none;
3}

none exibe imagens ou vídeos em seu tamanho e proporção originais. Ele não se ajusta para caber no tamanho do elemento pai, e o conteúdo transborda, se necessário.

O tamanho original do conteúdo é mantido.
Nenhum redimensionamento é feito para ajustar o conteúdo ao elemento pai.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down é um valor que combina o comportamento de none e contain. Se o conteúdo se ajusta ao elemento pai, ele se comporta como none, mas se o conteúdo for muito grande, aplica o comportamento de contain e é reduzido para caber.

O conteúdo é reduzido se for maior que o elemento pai.
É exibido em seu tamanho original se for menor.

Exemplo de Uso

Ajustando Imagens de Fundo ao Elemento Pai

Por exemplo, para espalhar uma imagem por toda a tela, pensando no design responsivo, é comum usar cover. O código a seguir é um exemplo de ajuste de uma imagem ao elemento pai, mesmo que ela seja cortada.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

Nesse caso, a imagem cobre completamente o elemento pai, mantendo um layout bonito em qualquer tamanho de tela. Se a proporção for diferente, algumas partes da imagem podem não ser visíveis, mas isso resulta em uma apresentação adequada ao design.

Exibindo imagens enquanto mantém a proporção

A seguir, se você quiser ajustar toda a imagem ao elemento pai, mantendo sua proporção, contain é adequado.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

Neste exemplo, a imagem é reduzida para caber no contêiner, resultando em algum espaçamento, mas a imagem original é exibida sem distorção.

Erros comuns

Um erro comum ao usar object-fit é não definir o tamanho do elemento pai. object-fit é uma propriedade para ajustar o conteúdo ao elemento pai, então, se o tamanho do elemento pai não estiver claro, o efeito esperado não pode ser alcançado. Certifique-se de que o elemento pai tenha width ou height devidamente definidos.

Por exemplo, no código a seguir, a altura do elemento pai não é especificada, então object-fit não funciona como pretendido.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

Nesse caso, você precisa especificar a altura do elemento pai ou ajustar todo o layout usando flexbox ou grid layout.

Situações em que `object-fit` deve ser usado

object-fit é importante, especialmente em designs responsivos e sites que atendem a vários tamanhos de tela. Por exemplo, é útil nos seguintes casos:.

Quando você deseja ajustar imagens ou vídeos para serem exibidos corretamente em dispositivos diferentes
Quando você deseja exibir imagens de fundo ou semelhantes em tela cheia, permitindo cortes
Quando você deseja ajustar uma imagem a um elemento pai, mantendo sua proporção
Quando você deseja exibir tamanhos de imagem de forma consistente, como em galerias

Usar object-fit nessas situações pode manter a consistência do design e melhorar a experiência do usuário.

Resumo

object-fit é uma poderosa propriedade CSS que permite controlar de forma flexível como imagens e vídeos são exibidos em relação aos elementos pai em uma página da web. Ao usar diferentes valores como fill, contain, cover, none e scale-down, é possível atender a vários requisitos de design. Ao entender como usá-lo corretamente e aplicá-lo adequadamente, você pode criar layouts visualmente atraentes.

Domine o uso de object-fit para criar designs responsivos e esteticamente agradáveis.

Propriedade `object-position`

A propriedade CSS object-position é usada para controlar o posicionamento de conteúdos como imagens e vídeos dentro de um elemento. Com o uso de object-position, você pode posicionar conteúdos em pontos específicos e proporcionar efeitos visuais que se ajustem ao layout.

Visão geral de `object-position`

object-position é aplicado principalmente a elementos de mídia como as tags <img> e <video>. Esta propriedade controla onde o conteúdo de mídia é exibido dentro de seu contêiner. object-fit é frequentemente usado em combinação com object-position, onde object-fit define como uma imagem ou vídeo se ajusta ao tamanho do contêiner, e object-position ajusta a posição de exibição do conteúdo.

1img {
2    object-fit: cover;
3    object-position: center;
4}

Neste exemplo, a imagem é redimensionada para se ajustar ao contêiner (object-fit: cover) e posicionada de forma que seu centro seja exibido (object-position: center).

Como Especificar Valores

object-position é especificado com dois valores, como segue.

Posição horizontal (eixo X)
Posição vertical (eixo Y)

Formato de Especificação de Valores

No object-position, você pode especificar os valores no seguinte formato.

Palavras-chave: top, right, bottom, left, center
Porcentagem: 0% a 100%
Unidades de comprimento: px, em, rem, etc.

Por exemplo, você pode usá-lo assim.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

Combinação de Palavras-chave e Porcentagens

Também é possível misturar palavras-chave e porcentagens.

1img {
2    object-position: right 50%;
3}

Neste exemplo, a imagem é posicionada na borda direita e centralizada verticalmente em 50%. Essa combinação é muito útil quando é necessário um posicionamento flexível.

Combinação com `object-fit`

object-position é frequentemente usado junto com object-fit. object-fit determina como uma imagem ou vídeo é redimensionado em relação à sua moldura. Por exemplo, usar object-fit: cover recorta a imagem para ajustar à moldura e a posiciona de acordo com o object-position especificado.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

Neste exemplo, a imagem se espalha por todo o contêiner, exibindo a parte inferior direita do conteúdo.

Exemplos Combinados com os Valores de `object-fit`

fill: A imagem pode ser distorcida, mas preenche todo o contêiner.
contain: A imagem inteira é exibida mantendo a proporção.
cover: Recortada para caber no contêiner, mantendo a proporção.
none: A imagem é exibida em seu tamanho original.

1img {
2    object-fit: contain;
3    object-position: top;
4}

Nesta configuração, a imagem é posicionada na parte superior do contêiner e a imagem inteira é exibida.

Uso Avançado

object-position pode ser aplicado em vários cenários, não apenas para ajustes simples de posicionamento, mas também para melhorar os efeitos visuais.

Enfatizando uma Parte da Imagem

É útil quando você deseja focar em uma parte específica da imagem em vez de exibir a imagem inteira. Defina object-fit como cover e use object-position para focar em uma área específica.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

Neste exemplo, a parte inferior esquerda da imagem é exibida, enfatizando as partes importantes.

Ao Usar um Vídeo como Plano de Fundo

object-position também se mostra útil ao usar um vídeo como plano de fundo. Você pode posicionar o vídeo em um local específico para manter a consistência com o design geral da página.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

Nesse contexto, o vídeo ocupa toda a página e é posicionado no centro superior.

Problemas Comuns e Soluções

Podem surgir alguns problemas ao usar object-position. Aqui, apresentamos problemas comuns e suas soluções.

Parte da imagem é cortada

Ao usar object-fit: cover, a imagem pode ser cortada para se ajustar ao contêiner. Nesse caso, ajustando a posição de exibição com object-position, você pode garantir que as partes importantes sejam exibidas.

1img {
2    object-fit: cover;
3    object-position: center;
4}

A posição da imagem não está como esperado

Especificações em porcentagem podem nem sempre ser intuitivas. É necessário considerar o tamanho e a proporção do contêiner e experimentar diferentes valores. Usar ferramentas de desenvolvedor para ajustar em tempo real é eficaz.

Resumo

object-position é uma ferramenta poderosa para posicionar elementos de mídia livremente. Combinando com object-fit, é possível alcançar layouts flexíveis adaptados ao design. Domine palavras-chave, porcentagens e unidades de comprimento para maximizar os efeitos visuais em várias situações.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

`overflow` e `contain` Propriedades

`object-fit` e `object-position` Propriedades

YouTube Video

HTML para Visualização

Relacionado ao Ajuste de Objetos

Propriedade object-fit

Valores de object-fit

fill (Valor Padrão)

contain

cover

none

scale-down

Exemplo de Uso

Ajustando Imagens de Fundo ao Elemento Pai

Exibindo imagens enquanto mantém a proporção

Erros comuns

Situações em que object-fit deve ser usado

Resumo

Propriedade object-position

Visão geral de object-position

Como Especificar Valores

Formato de Especificação de Valores

Combinação de Palavras-chave e Porcentagens

Combinação com object-fit

Exemplos Combinados com os Valores de object-fit

Uso Avançado

Enfatizando uma Parte da Imagem

Ao Usar um Vídeo como Plano de Fundo

Problemas Comuns e Soluções

Parte da imagem é cortada

A posição da imagem não está como esperado

Resumo

YouTube Video

Propriedade `object-fit`

Valores de `object-fit`

`fill` (Valor Padrão)

`contain`

`cover`

`none`

`scale-down`

Situações em que `object-fit` deve ser usado

Propriedade `object-position`

Visão geral de `object-position`

Combinação com `object-fit`

Exemplos Combinados com os Valores de `object-fit`