ridimensionamento automatico delle immagini in un layout di flusso CSS per simulare un layout html-table

Question

Ho un'immagine che, a seconda della risoluzione dello schermo, scende verso il basso fuori dalla vista nel mio layout di flusso CSS perché ho impostarne la larghezza e l'altezza di valori statici.

C'è un modo in un layout di flusso CSS per avere l'immagine ridimensionare automaticamente mentre qualcuno sta facendo la finestra del browser più piccola. Ho visto questo fatto in un layout HTML-tavolo e presumo le tabelle consentono lì - c'è un modo per fare anche questo in un layout di flusso CSS

?

Answer 1

Un rapido test mostra che questo:

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

in combinazione con:

img.test { width: 50%; }

Ridimensiona il modo in cui probabilmente si desidera. L'immagine diligentemente ridimensionata al 50% della larghezza della scatola che lo contiene, così come il ridimensionamento verticale, mantenendo le proporzioni.

Per quanto riguarda il ridimensionamento in base alle modifiche verticali, non funziona il modo in cui si vorrebbe, almeno non in modo coerente. Ho provato:

img.test { height: 50%; }

Nel corso di Google Chrome (2.0.172), si ridimensiona un po 'inconsitently; il dimensionamento è corretto ma non aggiorna dopo ogni trascinamento finestra. Nel corrente Firefox (3.5), l'altezza sembra essere ignorato completamente. Non ho alcun remoto recente IE, Safari, ecc da testare. Sentitevi liberi di modificare in questi risultati. Anche se questi fanno bene il suo ancora probabilmente qualcosa che si desidera evitare, e bastone con la larghezza.

Modifica Per far funzionare tutto questo, tutti gli elementi che contengono img.test devono essere dimensionati con percentuali, non staticamente.

Pensare in questo modo:

• del corpo è al 100% della dimensione della finestra.
• img è il 50% del corpo.
• img è il 50% della dimensione della finestra.

Ora supponiamo che io aggiungo un div. così ...

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

Poi

• del corpo è al 100% della dimensione della finestra.
• div è 100px, ignorando larghezza del corpo.
• img è il 50% della div.
• IMG è 50px, indipendentemente dalle dimensioni della finestra.

Se il div ha "width: 100%", anche se, poi la logica elabora la stessa di prima. Fino a quando la sua una certa percentuale, e non fisso, si può giocare con la percentuale sul img e farlo funzionare le dimensioni desiderate.

Answer 2

po 'di una supposizione dato che il mio css è spazzatura, ma dal momento che nessuno risponde, per quanto riguarda la fissazione di un width% o altezza o entrambe nell'immagine in modo che sia una percentuale del suo genitore. Boh?

Answer 3

Prova a impostare max-width a qualcosa come il 95%. Grazie modo l'immagine si restringe quando la larghezza del contenitore è inferiore alla larghezza dell'immagine. Tutti i contenitori padre avrebbe bisogno di ADJU

max-width:95%;