1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: Alterando a escala das imagens de background
slug: Web/Guide/CSS/Scaling_background_images
translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images
---
<p><span class="seoSummary">A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real.</span> Você pode tanto aumentar como diminuir a imagem.</p>
<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Duplicando uma imagem grande</h2>
<p>Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p>
<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Isto pode ser conseguido</span> <span class="hps">usando</span> <span class="hps">o</span> <span class="hps">seguinte</span> <span class="hps">CSS</span></span>:</p>
<pre class="brush: css; highlight:[8]">.square {
width: 300px;
height: 300px;
background-image: url(firefox_logo.png);
border: solid 2px;
text-shadow: white 0px 0px 2px;
font-size: 16px;
background-size: 150px;
}
</pre>
<p>O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas <span id="result_box" lang="pt"><span class="hps">você pode</span> <span class="hps">considerar a adição de</span> <span class="hps">uma versão</span> <span class="hps">pré-fixada</span> <span class="hps">se você</span> <span class="hps">está focando em </span><span class="hps">browsers</span> <span class="hps">muito antigos.</span></span></p>
<h2 id="Stretching_an_image" name="Stretching_an_image">Esticando uma imagem</h2>
<p><span id="result_box" lang="pt"><span class="hps">Você também pode especificar</span> <span class="hps">ambos</span> <span class="hps">os</span> <span class="hps">tamanhos,</span> <span class="hps">horizontal e vertical</span> <span class="hps">da imagem,</span> <span class="hps">assim</span><span>:</span></span></p>
<pre class="brush:css">background-size: 300px 150px;
</pre>
<p>O resultado fica assim:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
<h2 id="Scaling_an_image_up" name="Scaling_an_image_up"><span class="short_text" id="result_box" lang="pt"><span class="hps">Aumentando escala de uma</span> <span class="hps">imagem</span></span></h2>
<p><span id="result_box" lang="pt"><span class="hps">Na outra extremidade</span> <span class="hps">do espectro</span><span>, é possível</span> <span class="hps">dimensionar</span><span>-se</span> <span class="hps">uma imagem</span> <span class="hps">no</span> <span class="hps">fundo</span><span>.</span> <span class="hps">Aqui nós</span> aumentamos a escala de <span class="hps">um</span> <span class="hps">favicon</span> <span class="hps">de pixel</span> <span class="hps">32x32</span> para <span class="hps">300x300</span> <span class="hps">pixels</span><span>:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
<pre class="brush: css; highlight:[5]">.square2 {
width: 300px;
height: 300px;
background-image: url(favicon.png);
background-size: 300px;
border: solid 2px;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
</pre>
<p><span id="result_box" lang="pt"><span class="hps">Como você pode ver</span><span>, o</span> <span class="hps">CSS</span> <span class="hps">é, na verdade</span><span>, essencialmente</span> <span class="hps">idêntico, salvo</span> <span class="hps">o nome do</span> <span class="hps">arquivo de imagem.</span></span></p>
<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Valores especiais: "contain" e "cover"</h2>
<p>Da mesma maneira que o {{cssxref("<length>")}}, a <span id="result_box" lang="pt"><span class="hps">propriedade</span> <span class="hps">CSS</span> de </span>{{ cssxref("background-size") }} <span id="result_box" lang="pt"><span class="hps">oferece dois</span> <span class="hps">valores de tamanho</span> <span class="hps">especial,</span> contain <span class="hps">e</span> cover<span class="hps">.</span> <span class="hps">Vamos dar uma</span> <span class="hps">olhada nestes</span><span>.</span></span></p>
<h3 id="contain" name="contain"><code>contain</code></h3>
<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> contain <span class="hps">especifica</span> <span class="hps">que, independentemente</span> <span class="hps">do</span> <span class="hps">tamanho</span> <span class="hps">da caixa que contém</span><span>,</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve</span> <span class="hps">ser</span> <span class="hps">dimensionado</span> <span class="hps">de modo a que</span> <span class="hps">cada</span> <span class="hps">lado</span> <span class="hps">seja tão grande quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">que não exceda</span> <span class="hps">o</span> <span class="hps">comprimento do lado</span> <span class="hps">correspondente do recipiente</span><span>.</span> <span class="hps">Tente redimensionar</span> <span class="hps">a janela</span> <span class="hps">usando um navegador que</span> <span class="hps">suporta</span> <span class="hps">imagens de fundo</span> <span class="hps">de escala</span> <span class="hps">(como o</span> <span class="hps">Firefox 3.6</span> <span class="hps">ou posterior) para</span> <span class="hps">ver isso em ação</span> <span class="hps">no exemplo</span> <span class="hps">vivo</span> <span class="hps">abaixo.</span></span></p>
<figure>
<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
</figure>
<pre class="brush:html"><div class="bgSizeContain">
<p>Tente redimensionar a janela e ver o que acontece.</p>
</div></pre>
<pre class="brush:css;highlight:[4]">.bgSizeContain {
height: 200px;
background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
background-size: contain;
border: 2px solid darkgray;
color: #000; text-shadow: 1px 1px 0 #fff;
}</pre>
<h3 id="cover" name="cover"><code>cover</code></h3>
<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> cover <span class="hps">especifica</span> <span class="hps">que</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve ser dimensionado</span> <span class="hps">de modo que seja</span> <span class="hps">tão pequena quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">assegurar</span> <span class="hps">que ambas as dimensões</span> <span class="hps">são maiores</span> <span class="hps">do que</span> <span class="hps">ou igual</span> <span class="hps">à dimensão</span> <span class="hps">correspondente do recipiente</span><span>.</span></span></p>
<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure>
<p>Os exemplos à seguir usam HTML & CSS:</p>
<pre class="brush:html"><div class="bgSizeCover">
<p>Tente redimensionar a janela e ver o que acontece.</p>
</div></pre>
<pre class="brush:css;highlight:[4]">.bgSizeCover {
height: 200px;
background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
background-size: cover;
border: 2px solid darkgray;
color: #000; text-shadow: 1px 1px 0 #fff;
</pre>
<h2 id="See_also" name="See_also">Veja Também</h2>
<ul>
<li>{{ cssxref("background-size") }}</li>
<li>{{ cssxref("background") }}</li>
</ul>
|
