Ressimensionamento de imagem automática em um layout de fluxo CSS para simular um layout de tabela HTML

Question

Eu tenho uma imagem que, dependendo da resolução da tela, cai da vista no meu layout de fluxo CSS porque definei sua largura e altura para valores estáticos.

Existe uma maneira de um layout de fluxo CSS para que a imagem redimensione automaticamente enquanto alguém está diminuindo a janela do navegador. Eu já vi isso feito em um layout de tabela HTML e presumo que as tabelas possibilitem lá - existe uma maneira de fazer isso também em um layout de fluxo CSS?

Answer 1

Um teste rápido mostra que isso:

<img class="test" src="testimage.jpg" />

combinado com:

img.test { width: 50%; }

Redimensiona a maneira como você provavelmente deseja. A imagem redimensionou obedientemente para 50% a largura da caixa que a contém, além de redimensionar verticalmente, mantendo a proporção.

Quanto ao redimensionamento com base em alterações verticais, ele não funciona da maneira que você gostaria, pelo menos não de forma consistente. Eu tentei:

img.test { height: 50%; }

No atual Google Chrome (2.0.172), ele redimensiona um pouco de maneira inconsífica; O dimensionamento está correto, mas não atualiza após cada janela arrastar. No Firefox atual (3.5), a altura parece ser completamente ignorada. Não tenho nenhum IE remotamente recente, Safari, etc. para testar. Sinta -se à vontade para editar nesses resultados. Mesmo que aqueles que se saem bem, provavelmente ainda é algo que você deseja evitar e manter a largura.

EDITAR:Para que isso funcione, todos os elementos que contêm o teste precisam ser dimensionados com porcentagens, não estaticamente.

Pense desta maneira:

• O corpo é 100% do tamanho da janela.
• IMG é 50% do corpo.
• O IMG tem 50% do tamanho da janela.

Agora suponha que eu adicione uma div. assim...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Então

• O corpo é 100% do tamanho da janela.
• Div é 100px, ignorando a largura do corpo.
• IMG é 50% da div.
• O IMG é 50px, independentemente do tamanho da janela.

Se a div tem "largura: 100%", porém, a lógica funciona da mesma forma que antes. Enquanto for uma porcentagem, e não fixa, você pode jogar com a porcentagem no IMG e fazê -lo funcionar do tamanho que deseja.

Answer 2

Um pouco de palpite, já que meu CSS é lixo, mas como ninguém está respondendo, que tal definir uma % de largura ou altura ou ambos na imagem para que seja uma porcentagem de seus pais. Não sei?

Answer 3

Tente definir o máximo de largura para algo como 95%. Graças à maneira que a imagem encolherá quando a largura do contêiner for menor que a largura da imagem. Todos os contêineres pais precisariam adjugar

max-width:95%;