diff options
Diffstat (limited to 'files/pt-br/web/css/background-size/index.html')
| -rw-r--r-- | files/pt-br/web/css/background-size/index.html | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/files/pt-br/web/css/background-size/index.html b/files/pt-br/web/css/background-size/index.html new file mode 100644 index 0000000000..c37b0182b4 --- /dev/null +++ b/files/pt-br/web/css/background-size/index.html @@ -0,0 +1,255 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <strong><code>background-size</code></strong> do <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica o tamanho das imagens de fundo. O tamanho da imagem pode ser totalmente ou apenas parcialmente comprimido com o objetivo de preservar sua proporção.</p> + +<pre class="brush: css no-line-numbers">/* Sintaxe */ +background-size: cover; +background-size: contain; + +/* Sintaxe de um valor */ +/* largura da imagem (height é setado como 'auto') */ +background-size: 50%; +background-size: 3em; +background-size: 12px; +background-size: auto; + +/* Sintaxe de dois valores */ +/* Primeiro valor: largura da imagem, segundo valor: altura */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Múltiplos valores de backgrounds para a imagem de fundo */ +/* Não confunda com background-size: auto auto */ +background-size: auto, auto; +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Valores globais */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<div class="hidden" id="background-size"> +<pre class="brush: html"><div id="container"> + <div class="subcontainer contain">contain</div> + <div class="subcontainer cover">cover</div> + <div class="subcontainer width">120px</div> + <div class="subcontainer width-height">120px 200px</div> +</div> +</pre> + +<pre class="brush: css">#container { + width: 100%; + display:flex; + justify-content: space-around; + height: 300px; + overflow: scroll; + background-color: #EEEEEE; +} + +.subcontainer { + width: 100%; + max-width: 200px; + margin: 8px; + padding: 5px; + background-color: white; + background-image: url("https://mdn.mozillademos.org/files/15195/eagle.jpg"); + background-repeat: no-repeat; + color: white; + font-family: monospace; +} + +.contain { + background-size: contain; +} + +.cover { + background-size: cover; +} + +.width { + background-size: 120px; +} + +.width-height { + background-size: 120px 200px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("background-size", "100%", 300, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O tamanho de uma única imagem de fundo pode ser especificado de três maneiras diferentes:</p> + +<ul> + <li>usando a palavra-chave <code><a href="#contain">contain</a></code></li> + <li>usando a palavra-chave <code><a href="#cover">cover</a></code></li> + <li>usando valores para <em>width</em> e <em>height</em></li> +</ul> + +<p>Para especificar usando <em>width</em> e <em>height</em>, você pode fornecer um ou dois valores:</p> + +<ul> + <li>se apenas um valor for fornecido, ele valerá para a <em>width</em> e height será<code><a href="#auto">auto</a></code>.</li> + <li>Se dois valores forem fornecidos, o primeiro corresponde a <em>width</em> e o segundo a <em>height</em>.</li> +</ul> + +<p>Cada valor pode ser um <code><a href="#length"><length></a></code>, uma <code><a href="#<percentage>"><percentage></a></code>, ou <code><a href="#auto">auto</a></code>.<br> + <br> + Por exemplo:</p> + +<pre class="brush: css">background-size: contain; + +background-size: 50%; +background-size: 3em; + +background-size: auto 1em; +background-size: 50% 25%;</pre> + +<p><br> + Para especificar o tamanho de fundo para mais de uma imagem, forneça múltiplos tamanhos separados por vírgula:</p> + +<pre class="brush: css">background-size: 50% 25%, contain, 3em;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="length" name="length"><code><length></code></a></dt> + <dd>Um valor <code>{{cssxref("<length>")}}</code> que ajusta a imagem de fundo para o comprimento especificado na dimensão correspondente. Comprimentos negativos não são permitidos.</dd> + <dt><a id="<percentage>" name="<percentage>"><code><percentage></code></a></dt> + <dd>Um valor {{cssxref("<percentage>")}} que ajusta a imagem de fundo na dimensão correspondente com a porcentagem especificada para a área do elemento pai, que é determinado pelo valor {{cssxref("background-origin")}}. A área correspondente ao elemento pai é, por padrão, a área que engloba o conteúdo da caixa e seu respectivo padding; a área pode também ser alterada para englobar apenas o conteúdo ou para a área contendo as bordas, o padding e o conteúdo. Se o {{cssxref("background-attachment","attachment")}} está <code>fixed</code>, a área do elemento pai é a área inteira do janela do navegador, não incluindo a área coberta pelas barras de rolagem (se estiverem presentes). Valores negativos de porcentagem não são permitidos.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Uma palavra-chave que ajusta a imagem de fundo para tal direção de modo que mantenha a proporção da imagem inalterada.</dd> + <dt><a id="contain" name="contain"><code>contain</code></a></dt> + <dd>Uma palavra-chave que aumenta o máximo possível a imagem mantendo a sua proporção (a imagem não fica esticada). A imagem tenta ocupar o espaço inteiro do container. Quando a imagem e o container tem diferentes dimensões, as áreas não preenchidas (tanto top/bottom ou left/right) são preenchidas com a cor de fundo.</dd> + <dt><a id="cover" name="cover"><code>cover</code></a></dt> + <dd>Uma palavra-chave que é o inverso de <code>contain</code>. Ajusta a imagem o mais largamente possível e mantém sua proporção (a imagem não fica esticada). A imagem "cobre" o container inteiro, tanto em altura como em largura. Quando a imagem e o container têm diferentes dimensões,<em>a imagem ultrapassa os limites do container</em> em qualquer direção, para continuar mantendo a proporção.</dd> +</dl> + +<p>A interpretação dos possíveis valores depende das dimensões intrínsecas da imagem (largura e altura) e da proporção intrínseca (proporção da largura e altura). Um imagem bitmap sempre tem dimensões intrínsecas e uma proporção intrínseca. Uma imagem pode conter ambas as dimensões intrínsecas (e portanto deve ter uma proporção intrínseca). Poderá contar também uma ou nenhuma dimensão intrínseca, e portanto pode ou não pode conter uma proporção intrínseca. Gradients são tratados como imagens sem dimensões ou proporções intrínsecas.</p> + +<div class="note"> +<p><strong>Nota: </strong>Esse comportamento mudou no Gecko 8.0 {{geckoRelease("8.0")}}. Antes disso, gradients eram tratados como imagens sem dimensões intrínsecas, porém com uma proporção intrínseca idêntica a da área do elemento pai.</p> +</div> + +<p>Imagens geradas por elementos usando {{cssxref("-moz-element")}} (que na realidade casa com um elemento) são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento de fundo se o elemento é SVG, com a proporção intrínseca correspondente.</p> + +<div class="note"><strong>Nota:</strong> Este não é o comportamento atualmente especificado, que é que as dimensões intrínsecas e a proporção devem ser as do elemento em todos os casos.</div> + +<p>O tamanho renderizado da imagem de fundo é então computado da seguinte forma:</p> + +<dl> + <dt>Se ambos os componentes do <code>background-size</code> são especificados e não há <code>auto</code></dt> + <dd>A imagem de fundo é renderizada no tamanho especificado.</dd> + <dt>Se o <code>background-size</code> é <code>contain</code> ou <code>cover</code>:</dt> + <dd>A imagem é renderizada, preservando sua proporção intrínseca, com o maior tamanho contido, ou cobrindo a área do elemento pai. Se a imagem não tiver uma proporção intrínseca, então ela é renderizada no tamanho da área do elemento pai.</dd> + <dt>Se o <code>background-size</code> é <code>auto</code> ou <code>auto auto</code>:</dt> + <dd>Se a imagem tiver duas dimensões intrínsecas, ela é renderizada nesse tamanho. Se não tiver dimensões intrínsecas e nenhuma proporção intrínseca, ela é renderizada ao tamanho da área do elemento pai. Se não tiver dimensões, mas tiver uma proporção, é processado como se <code>contain</code> tivesse sido especificado. Se a imagem tiver uma dimensão intrínseca e uma proporção, ela é renderizada no tamanho determinado por essa dimensão e a proporção. Se a imagem tiver uma dimensão intrínseca mas nenhuma proporção, ela é processada usando a dimensão intrínseca e a dimensão correspondente da área do elemento pai. + <div class="note"><strong>Nota:</strong> imagens SVG tem um atributo <a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a> que é equivalente ao 'contain'. No Firefox 43, ao contrário do Chrome 52, um background-size especificado explicitamente faz com que <a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a> seja ignorado.</div> + </dd> + <dt>Se o background-size tem um componente <code>auto</code> e um componente não <code>auto</code>:</dt> + <dd>Se a imagem tiver uma proporção intrínseca, então use a dimensão especificada. Se a imagem não tiver uma proporção intrínseca, use a dimensão especificada para essa dimensão. Para a outra dimensão, use a dimensão intrínseca correspondente da imagem se houver uma. Se não existe essa dimensão intrínseca, use a dimensão correspondente da área do elemento pai.</dd> +</dl> + +<p>Observe que o dimensionamento de fundo para vectors que não possuem dimensões ou proporções intrínsecas ainda não está totalmente implementado em todos os navegadores. Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores (especificamente incluindo versões do Firefox 7 ou anteriores e Firefox 8 ou superior) para ter certeza de que diferentes renderizações são aceitáveis.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Essa demonstração do <code>background-size: cover</code></a> e <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">essa demonstração do <code>background-size: contain</code></a> foram feitas para você abrir em uma nova aba para ver como <code>contain</code> e <code>cover</code> se comportam quando as dimensões da área do elemento pai varia. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Essa séria de demonstrações de como <code>background-size</code> funciona e interage com outras propriedades <code>background-*</code> </a>devem ser suficientes para entender como usar <code>background-size</code> sozinho e em conjunto com outras propriedades.</p> + +<h2 id="Notas">Notas</h2> + +<p>Se você estiver especificando um gradient como plano de fundo e tiver especificado um <code>background-size</code> junto, é melhor não especificar um tamanho que use um único componente setado como auto ou seja especificado usando apenas um valor de largura (por exemplo, <code>background-size: 50%</code>). A renderização de gradients em tais casos mudou no Firefox 8 e, no momento, geralmente é inconsistente em todos os navegadores, pois nem todos implementam a renderização em total conformidade com a especificação <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size"><code>background-size</code> </a>do CSS3 e com a <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">especificação do CSS3 para valores d</a><a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">e gradient</a>.</p> + +<pre class="brush: css">.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NÃO RECOMENDADO */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Observe que, em particular, não é recomendável usar uma dimensão de pixel e uma dimensões <code>auto</code> com um gradient, porque é impossível replicar a renderização nas versões do Firefox antes de 8 e nos navegadores que não implementam a renderização do Firefox 8, sem saber o tamanho exato do elemento cujo plano de fundo está sendo especificado.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p class="hidden">A tabela de compatibilidade nessa página é gerada por dados estruturados. Se você quer contribuir com os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="Soluções_alternativas">Soluções alternativas</h2> + +<h3 id="Para_Internet_Explorer_anterior_ao_IE8">Para Internet Explorer anterior ao IE8</h3> + +<p>Como o Internet Explorer 8 não suporta a propriedade <code>background-size</code>, é possível emular algumas de suas funcionalidades usando a propriedade não padrão <code>-ms-filter</code>:</p> + +<pre class="brush:css">-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre> + +<p>Isso simula o valor <code>cover</code>.</p> + +<h3 id="No_Firefox_3.5">No Firefox 3.5</h3> + +<p>Enquanto essa propriedade foi adicionada no Firefox 3.6, é possível esticar totalmente a imagem no Firefox 3.5 usando {{cssxref("-moz-border-image")}}.</p> + +<pre class="brush:css">.foo { + background-image: url(bg-image.png); + + -webkit-background-size: 100% 100%; /* Safari 3.0 */ + -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ + -o-background-size: 100% 100%; /* Opera 9.5 */ + background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ + + -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ +}</pre> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> +</ul> |