Ressimensionamento de imagem automática em um layout de fluxo CSS para simular um layout de tabela HTML
-
12-09-2019 - |
Pergunta
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?
Solução
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.
Outras dicas
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?
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%;