Definir larguras imagem proporcionais para redimensionamento do navegador

Question

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?

Answer 1

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%.

Answer 2

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.

Answer 3

Não, a imagem ainda será de 50% do div, e se o div é uma proporção da página, isso não importa.

Answer 4

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