Definir larguras imagem proporcionais para redimensionamento do navegador
-
12-09-2019 - |
Pergunta
Se eu tiver uma imagem combinada com um estilo:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
A imagem redimensionada para 50% da largura da caixa que o contém, bem como redimensionamento verticalmente, mantendo a relação de aspecto.
Este parece exigir a DIV encerrando a ser definida para uma largura particular e valor de altura. Mas se quiser que o DIV anexando para redimensionar automaticamente como o navegador é arrastado menor ou maior, isto não seria um problema?
Solução
Eu já esclareceu a minha resposta à sua ORIGINAL questão . Vai dar uma olhada e ver se ele apura as coisas. Mais ou menos, se você quiser a imagem para redimensionar com a janela que você não pode definir o DIV com uma largura fixa e altura. O DIV deve ter uma largura e altura também%.
Outras dicas
Você precisará especificar manualmente as propriedades width
e height
para obter a imagem para manter as suas dimensões. Isso não seria muito difícil se você estiver usando server-side codificação (PHP / ASP).
Outra maneira de fazer isso seria usar JavaScript para calcular e redimensionar a imagem de forma dinâmica.
Não, a imagem ainda será de 50% do div, e se o div é uma proporção da página, isso não importa.
Seus todas as proporções: O div encerrando poderia ser 2/3 de toda a janela, ea imagem vai wil 1/2 disso. Tudo começa calculado antes de sua exibido, apenas um monte de processamento de números. ; D