através da filosofia de um web design responsivo, é preciso encontrar uma solução
que faça com que as imagens se adequem ao espaço devido e, independentemente
da resolução, sejam bem apresentadas.
Para começar, vamos ver como ficará o exemplo com uma imagem colocada na
primeira chamada. O HTML muda para:
<article class="last-content-call">
<h2 class="secondary-title">
Título de Conteúdo
</h2>
<img src="cute-dogs.jpg" width="350">
4.1. CSS para imagens flexíveis
Casa do Código
<p class="brief">
Resumo ou
descrição deste conteúdo.
Deve ser algo que chame a atenção!
</p>
<a href="#">Leia mais</a>
</article>
E o resultado é:
Veja que coisa: a imagem, corretamente marcada com seu width no HTML, pos-
sui 350px de largura. Acontece que, seja qual for a resolução em que a página estiver sendo vista, essa quebra acontecerá...
56
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
Pode parecer incrível mas, para conseguirmos um efeito interessante de imagens
flexíveis, só é preciso um pouquinho de CSS. Nada de regras extravagantes, nem de
propriedades recém-lançadas anteontem que nenhum browser ainda suporta; é o
bom e velho CSS, com propriedades familiares a qualquer um com pouco tempo de
estudos em folhas de estilo. Vamos acrescentar no início de nosso CSS:
img {
max-width:
100%;
}
Segundo a documentação sobre max-width do W3C (http://ow.ly/bcKdv), essa
propriedade CSS permite restringir larguras de conteúdo dentro de um determinado
intervalo. No caso, nosso intervalo foi 100%. Em outras palavras, nossa regra ge-nérica de CSS significa algo como: as imagens podem ter qualquer largura até no
máximo 100%. Mas 100% de quê? Do elemento em que estão contidas!
No caso da imagem dos cachorrinhos que usamos,
ela é filha de
.last-content-call.
Portanto, a regra vale para a largura deste elemento
ou, no caso de sua falta, na largura do elemento ascendente e assim por diante.
Depois de aplicada a regra max-width:
100%; as coisas já começam a ficar mais
interessantes:
57
4.1. CSS para imagens flexíveis
Casa do Código
Com essa regra em uso, já é possível complementar nosso layout fluído e ver
como este fica com todos os .last-content-call com suas respectivas imagens:
58
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
Uma observação importante é que, caso seja preciso se preocupar com o IE8 na
implementação de imagens responsivas, é preciso colocar width:auto em imagens
dentro de elementos com float sem declaração explícita de largura (http://ow.ly/
cO3fP).
4.2
CSS para outros recursos flexíveis
E, mais uma vez, uma requisição foi feita à equipe de desenvolvimento do site. Dessa vez, será preciso que um vídeo seja sempre carregado na barra lateral, logo abaixo dos menu principal. Nosso aside então muda para o seguinte:
<aside class="content-sidebar">
<nav class="main-nav">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</nav>
<iframe src="http://www.youtube.com/embed/1YLKyVwExOs" width="560"
height="315" frameborder="0" allowfullscreen></iframe>
</aside>
O vídeo escolhido absolutamente não importa. O fato é que o código foi copi-
ado diretamente do recurso de compartilhamento do YouTube (mas poderia ter sido
qualquer outro serviço de compartilhamento de vídeos). Do jeito que de lá veio, cá está. Ao observamos o resultado disso, é possível perceber que algo não saiu como
deveria.
59
4.2. CSS para outros recursos flexíveis
Casa do Código
O embedded está com o tamanho totalmente fora do aceitável para o caso e está
quebrando o layout. No caso, ele não pode extrapolar os limites do aside e deve
aparecer corretamente em qualquer resolução e dispositivo em que o site for aces-
sado. Pode parecer incrível, mas a mesma regra que aplicamos anteriormente para
imagens também pode ser aplicada para outros tipos de mídia e recursos, incluindo
iframe, object, embed e video! Então basta atualizar para:
img,
iframe,
object,
embed,
video {
max-width: 100%;
}
60
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
E, assim como o esperado,
nosso HTML contempla boa apresenta-
ção/posicionamento em qualquer resolução.
Em outras palavras, agora temos
um vídeo flexível!
É possível ainda incrementar nossa regra. Nos testes realizados, a responsividade
dos recursos não é comprometida de nenhuma maneira; o acréscimo facultativo só
altera um pouco como os elementos são apresentados.
img,
iframe,
object,
embed,
video {
height: auto;
max-width: 100%;
}
61
4.2. CSS para outros recursos flexíveis
Casa do Código
Sem muitas alterações no comportamento dos elementos, é possível mudar o
valor da propriedade height de auto para 100% . Fica ao critério e/ou necessidades do projeto a decisão da mudança.
O YouTube coloca, automaticamente, tarjas pretas em cima e em baixo do vídeo
ao se redimensionar, preservando o ratio original do vídeo. Entretanto, caso