Imagens responsivas

[Good 4]

Boa noite, primeiramnete pesquisei bastante e não achei nada relacionado com o que preciso...

 

É assim:

- Tenho várias imagens, e elas devem caber entro de uma div com altura e largura fixas;

- Independente da quantidade de imagens, elas devem estar dentro da div. Ou seja, qunato maior a quantidade de imagens dentro da div, menor sera a altura.

 

Vejam as imgs pra ver se entenderam:

<div style="width: 500px; height: 100px;">
     <img src="img1.png" style="height: 100%;">
     <img src="img2.png" style="height: 100%;">
     <img src="img3.png" style="height: 100%;">
     <img src="img4.png" style="height: 100%;">
     <img src="img5.png" style="height: 100%;">
     <img src="img6.png" style="height: 100%;">
     <img src="img7.png" style="height: 100%;">
     <img src="img8.png" style="height: 100%;">
</div>

Não faço ideia de como fazer com que elas diminuem a largura de acordo com a qunatidade de imagens.. Pode ser feito com javascript tbm...

[André do Vale 76]

Você pode fazer com alguma das sugestões abaixo:

• Utilização de flexbox (o que precisaria de js para solucionar a renderização em IE9 e inferiores). http://www.w3.org/TR/css-flexbox-1/;
• Utilização de display table, table-row e table-cell (aumentando a quantidade de tags utilizadas, mais especificamente envolvendo cada imagem em uma div ou outro elemento preferido), fazendo com que a visualização se comporte feito uma tabela, e as imagens ocupem o espaço máximo das 'células';
• Ou, como você mesmo disse, fazer a solução por js: calcule a largura do pai, e a divida entre a quantidade de filhos (imagens). Lembrando de subtrair os espaçamentos desejados.

[Good 4]

haha

por tabelas é mais prático.. tinha esqecido delas..

 

obg

[André do Vale 76]

Não é exatamente por tabelas (aceitas, semanticamente, apenas para dados tabulares), mas sim 'simular' o comportamento elástico de tabela com os display comentados anteriormente.