Articles
Introdução ao CSS
`object-fit` e `object-position` Propriedades

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

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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</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: 150px; 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.

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.

Como Especificar Valores

object-position pode especificar posições usando um, dois ou quatro valores. No entanto, a especificação de quatro valores pode não ser suportada por navegadores antigos.

Especificando um Valor

Se apenas um valor for especificado, ele será interpretado como a posição horizontal (eixo X) e a posição vertical (eixo Y) será automaticamente definida como center.

  • Quando especificado como object-position: left;, o objeto é posicionado à esquerda.
  • Quando especificado como object-position: 70%;, o objeto é posicionado a 70% horizontalmente e centralizado verticalmente.
  • Quando especificado como object-position: 50px;, o objeto é posicionado a 50px da esquerda e centralizado verticalmente.

Especificando Dois Valores

Ao especificar dois valores, você pode definir separadamente as posições horizontal (eixo X) e vertical (eixo Y).

  • Quando especificado como object-position: center center;, o objeto é centralizado.
  • Quando especificado como object-position: right top;, o objeto é posicionado no canto superior direito.
  • Quando especificado como object-position: 75% 20%;, o objeto é posicionado a 75% horizontalmente e a 20% verticalmente.
  • Quando especificado como object-position: 50px 25px;, o objeto é posicionado a 50px da esquerda e a 25px do topo.

Especificando Quatro Valores

Ao especificar quatro valores, você pode fornecer um posicionamento mais detalhado usando palavras-chave como left ou top junto com seus deslocamentos.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • Quando especificado como object-position: left 10px top 20px;, o objeto é posicionado a 10px da esquerda e a 20px do topo.
  • Quando especificado como object-position: right 15% bottom 30px;, o objeto é posicionado a 15% da direita e a 30px da parte inferior.
Formato de Especificação de Valores

object-position pode aceitar os seguintes formatos de valor.

  • Você pode especificar palavras-chave como top, right, bottom, left e center.
  • Você também pode especificar valores usando porcentagens como 50% ou unidades como px.

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: right bottom;
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

Você pode especificar os seguintes valores para 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.

Por exemplo, usar object-fit: contain exibe a imagem inteira e a posiciona de acordo com a configuração de object-position.

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

Com esta configuração, a imagem é colocada no lado direito 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` PropriedadesPropriedades CSS relacionadas à transparência