Impostazione larghezze immagine proporzionali per il browser di ridimensionamento

Question

Se ho un immagine combinata con uno stile:

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

img.test { width: 50%;}

L'immagine ridimensiona al 50% della larghezza della scatola che lo contiene, così come il ridimensionamento verticale, mantenendo le proporzioni.

Questo sembra richiedere DIV racchiude essere impostato a un particolare larghezza e valore di altezza. Ma se si desidera che il DIV racchiude per ridimensionare automaticamente come browser viene trascinato piccole o più grandi, non sarebbe questo un problema?

Answer 1

Ho chiarito la mia risposta al tuo originale domanda . Andare a dare un'occhiata e vedere se cancella le cose. Più o meno, se si desidera che l'immagine da ridimensionare con la finestra non possono impostare il DIV per una larghezza fissa e altezza. DIV deve avere una larghezza ed altezza% anche.

Answer 2

È necessario specificare manualmente le proprietà width e height per ottenere l'immagine di tenere le sue dimensioni. Questo non sarebbe troppo difficile se si sta utilizzando lato server di codifica (PHP / ASP).

Un altro modo per farlo sarebbe quello di usare JavaScript per calcolare e ridimensionare l'immagine in modo dinamico.

Answer 3

No, l'immagine sarà ancora il 50% del div, e se il div è una proporzione della pagina, che non importa.

Answer 4

Le sue tutte le proporzioni: Il div che racchiude potrebbe essere 2/3 di tutta la finestra, e l'immagine sarà wil 1/2 di quella. Il tutto viene calcolato prima della sua visualizzazione, solo un mucchio di macinare numeri. ; D