Criando Imagens responsivo com CSS

Neste tutorial, você vai aprender a técnica mais simples para fazer imagens responsivas.

Existem muitas técnicas de imagem responsivas, e eles variam em complexidade e nível de suporte do browser.

Um exemplo de uma maneira complicada de implementar imagens responsivas está usando o atributo src, que requer várias imagens mais marcação, e a dependência de um novo atributo de HTML que não é bem suportado por navegadores antigos.

Em contraste, o método coberto neste tutorial é simples e baseia-se apenas na CSS width e height propriedades, o que significa que o método irá funcionar em praticamente todos os navegadores e dispositivos. No entanto exige que o layout do projeto seja um layout fluido.

Você vai começar a ver diversas variações da técnica de imagem discutido neste tutorial, mas o conceito fundamental é o mesmo: Utilizar CSS, dar às imagens uma unidade percentual de comprimento (ou qualquer unidade relativa de comprimento, por exemplo, em para a sua width propriedade e, em seguida, dar a sua height propriedade um valor de auto.

Imagem básica Responsive

Vamos começar com um exemplo básico.

Temos um div que funciona como o contêiner de um elemento.

HTML

O recipiente tem uma width propriedade de 96%, de modo que ele tem margens esquerda e direita. Ele tem um max-width de 960px para que o layout não é muito grande em telas grandes.

A elemento dentro do recipiente tem uma width propriedade de 100% de modo a que a sua largura é sempre igual ao seu recipiente, independentemente do tamanho da janela de visualização, tornando-se responsivo. A height é definida como auto de modo que a imagem escalas proporcionalmente.

CSS

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; / * para centrar o recipiente * /
}
img {
width: 100%;
height: auto;
}

Ver exemplo

Note que o elemento será sensível mesmo que foi dado largura fixa e altura atributos HTML na marcação (ou seja width="960" height="640" Isso é ótimo porque significa que esta técnica é adequada para conteúdo legado que fixaram dimensões definidas via HTML.
Imagens Responsive em Colunas

Às vezes queremos imagens para indicar de lado a lado em colunas. Por exemplo, as galerias de imagens, muitas vezes exibir miniaturas em uma grade.

Para conseguir imagens que respondem em colunas, a única mudança que temos a fazer é baixar o CSS width propriedade e dar elementos a display de valor de propriedade de inline-block

Vamos discutir um par de esquemas de layout: Um layout de imagem de duas colunas e um layout de imagem de três colunas.
Two-coluna layout de imagem Responsive

Para um layout responsivo imagem de duas colunas, podemos definir o CSS width propriedade para 48%, ou cerca de metade do recipiente. A razão não está definido para 50% é dar as margens de imagens em seus lados.

HTML

CSS

img { width: 48%; display: inline-block; }

Três-coluna layout de imagem Responsive

Para um layout de imagem sensível de três colunas, o conceito é o mesmo, só precisamos definir a width propriedade para cerca de um terço da largura do recipiente: 32%.

HTML

CSS

.three-columns { width: 32%; display: inline-block; }

Ver exemplo
Imagens com pontos de interrupção condicional

É uma boa idéia ter pontos de interrupção condicionais para imagens sensíveis que são exibidos em colunas de modo que quando as imagens ficam muito pequeno, as colunas entrará em colapso.

Vamos precisar de consultas de mídia para fazer isso acontecer.

No exemplo a seguir, as imagens serão exibidas em uma coluna em smartphones, duas colunas em tablets, e quatro colunas em telas maiores.

HTML

CSS

/* For small devices (eg smartphones) */ img { max-width: 100%; display: inline-block; } /* For medium devices (eg tablets) */ @media (min-width: 420px) { img { max-width: 48%; } } /* For large devices (eg desktops) */ @media (min-width: 760px) { img { max-width: 24%; } }

Ver exemplo

Nota: É uma boa idéia para definir as apropriadas consultas de mídia para cada projeto que você trabalha em. Na página de demonstração, os parâmetros de consulta de mídia que foram escolhidos funcionou bem para o layout, mas eles podem não funcionar tão bem em outros projetos.
De largura Real Responsive

Para ter imagens sensíveis que são sempre 100% do tamanho da janela de exibição, só precisamos remover o contêiner max-width propriedade (que é 960px) e dar-lhe uma width de 100%.

.container { width: 100%; } img { width: 100%; }

Ver exemplo
Embargo

Mesmo que esta técnica de imagem adequada é fácil de usar e tem um bom suporte do navegador, a sua desvantagem é que ele irá sempre servir o tamanho total das imagens. Isto significa grandes, imagens de alta resolução ainda será exibido ao usuário, mesmo se ele / ela está em um pequeno dispositivo móvel que não pode tirar proveito da dimensão plena e resolução das imagens.

Se você gostaria de servir condicionalmente diferentes versões da mesma imagem (por exemplo, tamanhos menores para dispositivos móveis e versões maiores para desktops) para melhorar o desempenho da web móvel, veja a srcset atributo e / ou o elemento de imagem. Se você gostaria de um polyfill para ser capaz de suportar navegadores de hoje, ver Scott Jehl Picturefill.