diff --git a/files/pt-br/web/css/background-size/index.md b/files/pt-br/web/css/background-size/index.md index b9a5edd1f89fe1..4769c9a442f3db 100644 --- a/files/pt-br/web/css/background-size/index.md +++ b/files/pt-br/web/css/background-size/index.md @@ -5,17 +5,24 @@ slug: Web/CSS/background-size {{CSSRef}} -A propriedade **`background-size`** do [CSS](/pt-BR/docs/CSS) 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. +A propriedade **`background-size`** do [CSS](/pt-BR/docs/Web/CSS) define o tamanho da imagem de fundo do elemento. +A imagem pode ser deixada no seu tamanho natural, estendida ou comprimida para caber no espaço disponível. + +{{EmbedInteractiveExample("pages/css/background-size.html")}} + +Espaços não cobertos por uma imagem de fundo são preenchidos com a propriedade {{cssxref("background-color")}}, e a cor do fundo ficará visível atrás das imagens de fundo que têm transparência/translucidez. + +## Sintaxe ```css -/* Sintaxe */ +/* Valores de palavras-chave */ background-size: cover; background-size: contain; /* Sintaxe de um valor */ -/* largura da imagem (height é setado como 'auto') */ +/* largura da imagem (altura torna-se 'auto') */ background-size: 50%; -background-size: 3em; +background-size: 3.2em; background-size: 12px; background-size: auto; @@ -26,213 +33,137 @@ 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; +/* Vários planos de fundo */ +background-size: auto, auto;/* Não confunda com `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Valores globais */ background-size: inherit; background-size: initial; +background-size: revert; +background-size: revert-layer; background-size: unset; ``` -```html hidden -
-
contain
-
cover
-
120px
-
120px 200px
-
-``` - -```css hidden -#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("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; -} -``` - -{{EmbedLiveSample("background-size", "100%", 300, "", "", "example-outcome-frame")}} - -{{cssinfo}} - -## Sintaxe - -O tamanho de uma única imagem de fundo pode ser especificado de três maneiras diferentes: - -- usando a palavra-chave [`contain`](#contain) -- usando a palavra-chave [`cover`](#cover) -- usando valores para _width_ e _height_ - -Para especificar usando _width_ e _height_, você pode fornecer um ou dois valores: - -- se apenas um valor for fornecido, ele valerá para a _width_ e height será[`auto`](#auto). -- Se dois valores forem fornecidos, o primeiro corresponde a _width_ e o segundo a _height_. - -Cada valor pode ser um [``](#length), uma [``](#percentage), ou [`auto`](#auto). - -Por exemplo: - -```css -background-size: contain; - -background-size: 50%; -background-size: 3em; - -background-size: auto 1em; -background-size: 50% 25%; -``` +A propriedade `background-size` é especificada de uma das seguintes maneiras: -Para especificar o tamanho de fundo para mais de uma imagem, forneça múltiplos tamanhos separados por vírgula: +- Usando a palavra-chave `contain` ou `cover`. +- Usando somente o valor da largura, caso em que o padrão de altura é `auto`. +- Usando ambos os valores da largura e altura, nesse caso o primeiro define a largura e o segundo define a altura. +Cada valor pode ser {{cssxref("<length>")}}, {{cssxref("<percentage>")}} ou `auto`. -```css -background-size: 50% 25%, contain, 3em; -``` +Para especificar o tamanho de várias imagens de fundo, separe o valor de cada uma com uma vírgula. ### Valores -- `` - - : Um valor `{{cssxref("<length>")}}` que ajusta a imagem de fundo para o comprimento especificado na dimensão correspondente. Comprimentos negativos não são permitidos. -- `` - - : 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á `fixed`, 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. -- `auto` - - : Uma palavra-chave que ajusta a imagem de fundo para tal direção de modo que mantenha a proporção da imagem inalterada. - `contain` - - : 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. + - : Dimensiona a imagem o máximo possível dentro do seu contêiner sem cortar ou estender a imagem. + Se o contêiner for maior do que a imagem, resultará em uma imagem lado a lado, a menos que a propriedade {{cssxref("background-repeat")}} esteja definida como `no-repeat`. - `cover` - - : Uma palavra-chave que é o inverso de `contain`. 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,_a imagem ultrapassa os limites do container_ em qualquer direção, para continuar mantendo a proporção. - -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. - -> **Nota:** Esse comportamento mudou no Gecko 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. - -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. - -> **Nota:** 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. + - : Dimensiona a imagem (enquanto preserva sua proporção) para o menor tamanho possível para caber no contêiner (ou seja: tanto a altura quanto o comprimento _cobrem_ completamente o contêiner), sem deixar espaço vazio. + Se as proporções do plano de fundo diferirem do elemento, a imagem será cortada verticalmente ou horizontalmente. +- `auto` + - : Dimensiona a imagem de fundo na direção correspondente de forma que as proporções intrínsecas sejam mantidas. +- {{cssxref("<length>")}} + - : Estende a imagem na dimensão correspondente ao comprimento especificado. Valores negativos não são permitidos. +- {{cssxref("<percentage>")}} + - : Estende a imagem na dimensão correspondente à porcentagem especificada da _área de posicionamento do plano de fundo_. + A área de posicionamento do plano de fundo é determinada pelo valor de {{cssxref("background-origin")}} (por padrão, o padding box). + No entanto, se o valor {{cssxref("background-attachment")}} do plano de fundo for `fixed`, a área de posicionamento será o {{glossary("viewport")}} inteiro. + Valores negativos não são permitidos. -O tamanho renderizado da imagem de fundo é então computado da seguinte forma: +### Dimensões e proporções intrínsecas -- Se ambos os componentes do `background-size` são especificados e não há `auto` - - : A imagem de fundo é renderizada no tamanho especificado. -- Se o `background-size` é `contain` ou `cover`: - - : 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. -- Se o `background-size` é `auto` ou `auto auto`: +O cálculo dos valores depende das dimensões intrínsecas da imagem (largura e altura) e das proporções intrínsecas (relação largura/altura). +Esses atributos são os seguintes: - - : 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 `contain` 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. +- Uma imagem bitmap (como a JPG) sempre possui dimensões e proporções intrínsecas. +- Uma imagem vetorial (como a SVG) não tem necessariamente dimensões intrínsecas. + Se tiver dimensões intrínsecas horizontais e verticais, também terá proporções intrínsecas. + Se não tiver dimensões ou tiver apenas uma dimensão, pode ou não ter proporções. +- O {{cssxref("<gradient>")}} do CSS não têm dimensões intrínsecas ou proporções intrínsecas. +- Imagens de plano de fundo criados com a função {{cssxref("element", "element()")}} usam as dimensões e proporções intrínsecas do elemento gerador. - > **Nota:** imagens SVG tem um atributo [preserveAspectRatio](/pt-BR/docs/Web/SVG/Attribute/preserveAspectRatio) que é equivalente ao 'contain'. No Firefox 43, ao contrário do Chrome 52, um background-size especificado explicitamente faz com que [preserveAspectRatio](/pt-BR/docs/Web/SVG/Attribute/preserveAspectRatio) seja ignorado. +> **Nota:** No Gecko, imagens de fundo criadas usando a função [`elemen()`](/pt-BR/docs/Web/CSS/element) são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento do fundo se o elemento é SVG, com a proporção intrínseca correspondente. Este é um comportamento fora do padrão. -- Se o background-size tem um componente `auto` e um componente não `auto`: - - : 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. +Com base nas dimensões e proporções intrínsecas, o tamanho renderizado da imagem de fundo é calculado da seguinte forma: -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. +- **Se ambos os componentes de `background-size` forem especificados e não forem `auto`:** A imagem de fundo será renderizada no tamanho especificado. +- **Se o `background-size` for `contain` ou `cover`:** Embora preservando suas proporções intrínsecas, a imagem é renderizada no maior tamanho contido ou cobrindo a área de posicionamento do plano de fundo. + Se a imagem não possui proporções intrínsecas, então ela é renderizada no tamanho da área de posicionamento do plano de fundo. +- **Se o `background-size` for `auto` ou `auto auto`:** -### Sintaxe formal + - Se a imagem tiver dimensões intrínsecas horizontais e verticais, ela será renderizada nesse tamanho. + - Se a imagem não tiver dimensões intrínsecas e proporções intrínsecas, ela será renderizada no tamanho da área de posicionamento do plano de fundo. + - Se a imagem não tiver dimensões intrínsecas, mas tiver proporções intrínsecas, ela será renderizada como se `contain` tivesse sido especificado. + - Se a imagem tiver apenas uma dimensão intrínseca e tiver proporções intrínsecas, ela será renderizada no tamanho correspondente a essa dimensão. + A outra dimensão é calculada usando a dimensão especificada e as proporções intrínsecas. + - Se a imagem tiver apenas uma dimensão intrínseca, mas não tiver proporções intrínsecas, ela será renderizada usando a dimensão especificada e a outra dimensão da área de posicionamento do plano de fundo. -{{csssyntax}} + > **Nota:** Imagens SVG têm um atributo [preserveAspectRatio](/pt-BR/docs/Web/SVG/Attribute/preserveAspectRatio) que é equivalente ao `contain`; um `background-size` explícito faz com que `preserveAspectRatio` seja ignorado. -## Exemplos +- **Se o `background-size` tem um componente `auto` e um componente não `auto`:** -[Essa demonstração do `background-size: cover`](http://whereswalden.com/files/mozilla/background-size/page-cover.html) e [essa demonstração do `background-size: contain`](http://whereswalden.com/files/mozilla/background-size/page-contain.html) foram feitas para você abrir em uma nova aba para ver como `contain` e `cover` se comportam quando as dimensões da área do elemento pai varia. [Essa séria de demonstrações de como `background-size` funciona e interage com outras propriedades `background-*`](http://whereswalden.com/files/mozilla/background-size/more-examples.html) devem ser suficientes para entender como usar `background-size` sozinho e em conjunto com outras propriedades. + - Se a imagem tiver proporções intrínsecas, ela será ampliada para a dimensão especificada. + A dimensão não especificada é calculada usando a dimensão especificada e as proporções intrínsecas. + - Se a imagem não tiver proporções intrínsecas, ela será ampliada para a dimensão especificada. + A dimensão não especificada é calculada usando a dimensão intrínseca correspondente da imagem, se houver. + Se não houver essa dimensão intrínseca, ela se tornará a dimensão correspondente da área de posicionamento do plano de fundo -## Notas +> **Nota:** O dimensionamento do plano de fundo para imagens vetoriais que não possuem dimensões ou proporções intrínsecas ainda não foi totalmente implementado em todos os navegadores. +> Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores para garantir que os resultados sejam aceitáveis. -Se você estiver especificando um gradient como plano de fundo e tiver especificado um `background-size` 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, `background-size: 50%`). 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 [`background-size`](https://www.w3.org/TR/css3-background/#the-background-size) do CSS3 e com a [especificação do CSS3 para valores de gradient](http://dev.w3.org/csswg/css3-images/#gradients). +### Definição formal -```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%; -} -``` +{{cssinfo}} -Observe que, em particular, não é recomendável usar uma dimensão de pixel e uma dimensões `auto` 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. +## Sintaxe formal -## Especificações +{{csssyntax}} -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | -| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Initial definition | +## Exemplos -## Compatibilidade com navegadores +### Colocar lado a lado uma imagem grande -{{Compat("css.properties.background-size")}} +Vamos considerar uma imagem grande, uma imagem do logotipo do Firefox de 2982x2808. Queremos agrupar quatro cópias dessa imagem em um elemento de 300x300 pixels. +Para fazer isso, podemos usar um valor fixo de `background-size` de 150 pixels. -## Soluções alternativas +#### HTML -### Para Internet Explorer anterior ao IE8 +```html +
+``` -Como o Internet Explorer 8 não suporta a propriedade `background-size`, é possível emular algumas de suas funcionalidades usando a propriedade não padrão `-ms-filter`: +#### CSS ```css --ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')"; +.tiledBackground { + background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); + background-size: 150px; + width: 300px; + height: 300px; + border: 2px solid; + color: pink; +} ``` -Isso simula o valor `cover`. +#### Resultado -### No Firefox 3.5 +{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}} -Enquanto essa propriedade foi adicionada no Firefox 3.6, é possível esticar totalmente a imagem no Firefox 3.5 usando {{cssxref("-moz-border-image")}}. +Veja [Redimensionando as imagens de fundo](/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) para mais exemplos. -```css -.foo { - background-image: url(bg-image.png); +## Especificações - -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 */ +{{Specifications}} - -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ -} -``` +## Compatibilidade com navegadores + +{{Compat}} ## Veja também -- [CSS Reference](/pt-BR/docs/CSS/CSS_Reference) -- [Multiple backgrounds](/pt-BR/docs/CSS/Multiple_backgrounds) -- [Scaling background images](/pt-BR/docs/CSS/Scaling_background_images) +- [Redimensionando as imagens de fundo](/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) +- [Scaling of SVG backgrounds](/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds) +- {{cssxref("object-fit")}} diff --git a/files/pt-br/web/css/flex/index.md b/files/pt-br/web/css/flex/index.md index da1c045d7bac10..4deab44fdee73a 100644 --- a/files/pt-br/web/css/flex/index.md +++ b/files/pt-br/web/css/flex/index.md @@ -98,7 +98,7 @@ Esta propriedade é uma abreviação das seguintes propriedades CSS: } ``` -{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Propriedades", 1200, 370, "", "", "example-outcome-frame")}} By default flex items don't shrink below their minimum content size. To change this, set the item's {{cssxref("min-width")}} or {{cssxref("min-height")}}. diff --git a/files/pt-br/web/css/text-align/index.md b/files/pt-br/web/css/text-align/index.md index cfb7191a004d25..dce58d8194e36c 100644 --- a/files/pt-br/web/css/text-align/index.md +++ b/files/pt-br/web/css/text-align/index.md @@ -135,7 +135,7 @@ text-align: unset; #### Resultado -{{EmbedLiveSample("Justify","100%","100%")}} +{{EmbedLiveSample("Justificado","100%","100%")}} ### Notas diff --git a/files/pt-br/web/css/text-transform/index.md b/files/pt-br/web/css/text-transform/index.md index 52c9caa80e9b55..26c07fc17be633 100644 --- a/files/pt-br/web/css/text-transform/index.md +++ b/files/pt-br/web/css/text-transform/index.md @@ -61,7 +61,7 @@ Support for these specific cases vary from one browser to the other, so check th ## Examples -### `none` +### Example using "none" ```html

Initial String @@ -81,7 +81,7 @@ strong { float: right; } This demonstrates no text transformation. -{{ EmbedLiveSample('none', '100%', '100px') }} +{{ EmbedLiveSample('Example using "none"', '100%', '100px') }} ### `capitalize` (General) diff --git a/files/pt-br/web/css/width/index.md b/files/pt-br/web/css/width/index.md index 3216ed2964bad0..7669fb0d922889 100644 --- a/files/pt-br/web/css/width/index.md +++ b/files/pt-br/web/css/width/index.md @@ -126,7 +126,7 @@ p.douradinho { {{EmbedLiveSample('Porcentagem', '500px', '64px')}} -### max-content +### Exemplo utilizando "max-content" ```css p.maxgreen { @@ -141,9 +141,9 @@ p.maxgreen {

A comunidade Mozilla produz diversos softwares incríveis.

``` -{{EmbedLiveSample('max-content', '500px', '64px')}} +{{EmbedLiveSample('Exemplo utilizando "max-content"', '500px', '64px')}} -### min-content +### Exemplo utilizando "min-content" ```css p.minblue { @@ -157,7 +157,7 @@ p.minblue {

A comunidade Mozilla produz diversos softwares incríveis.

``` -{{EmbedLiveSample('min-content', '500px', '155px')}} +{{EmbedLiveSample('Exemplo utilizando "min-content"', '500px', '155px')}} ## Especificações