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, cade fuori vista nel mio layout di flusso CSS perché ho impostato la sua larghezza e altezza a static valori.

C'è un modo in un layout di flusso CSS per ridimensionare automaticamente l'immagine mentre qualcuno sta riducendo la finestra del browser. Ho visto questo fatto in un layout di tabella html e presumo che le tabelle lo rendano possibile - c'è un modo per farlo anche in un layout di flusso CSS?

Answer 1

Un rapido test mostra che questo:

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

combinato con:

img.test { width: 50%; } 

Ridimensiona il modo in cui probabilmente si desidera. L'immagine ridimensionata ridimensiona al 50% la larghezza della scatola che lo contiene, oltre a ridimensionare verticalmente, mantenendo le proporzioni.

Come per il ridimensionamento basato su modifiche verticali, non funziona nel modo desiderato, almeno non in modo coerente. Ho provato:

img.test { height: 50%; } 

Nel corrente Google Chrome (2.0.172), si ridimensiona un po 'inconsitently; il dimensionamento è corretto ma non si aggiorna dopo ogni trascinamento della finestra. Nell'attuale Firefox (3.5), l'altezza sembra essere completamente ignorata. Non ho alcun IE recente, Safari, ecc. Da testare. Sentiti libero di modificare questi risultati. Anche se quelli fanno bene è ancora probabilmente qualcosa che si vuole evitare e attenersi alla larghezza.

EDIT: Per questo scopo, tutti gli elementi di contenimento img.test devono essere dimensionati con percentuali, non staticamente.

pensare in questo modo:

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

Ora supponiamo di aggiungere un div. così ...

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

Poi

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

Se il div ha "larghezza: 100%", allora la logica funziona come prima. Finché la sua percentuale, e non è fissa, puoi giocare con la percentuale su img e farla funzionare nella misura che desideri.

Answer 2

bit di una supposizione dal momento che il mio css è spazzatura, ma dal momento che nessuno sta rispondendo, per quanto riguarda l'impostazione di una larghezza o altezza% o entrambi nell'immagine in modo che sia una percentuale del suo genitore. Boh?

Answer 3

impostazione max-width a qualcosa come il 95% prova. Grazie a come l'immagine si restringe quando la larghezza del contenitore è inferiore alla larghezza dell'immagine. Tutti i contenitori principali dovrebbero essere aggiornati

max-width:95%;