Come posso ridimensionare un’immagine in modo dinamico con i CSS quando cambia la larghezza / altezza del browser?

Mi chiedo come posso ridimensionare un’immagine insieme alla finestra del browser, ecco quello che ho fatto finora (o scaricare l’intero sito in un ZIP ).

Funziona bene in Firefox, ma ha problemi con Chrome: l’immagine non viene sempre ridimensionata, in qualche modo dipende dalla dimensione della finestra quando la pagina è stata caricata.

Anche questo funziona bene in Safari, ma a volte l’immagine viene caricata con la sua larghezza / altezza minima. Forse questo è causato dalla dimensione dell’immagine, non sono sicuro. (Se carica ok, prova ad aggiornare più volte per vedere il bug.)

Qualche idea su come potrei renderlo più a prova di proiettile? (Se sarà necessario JavaScript, potrei vivere anche con quello, ma è preferibile usare CSS.)

Questo può essere fatto con puro CSS e non richiede nemmeno query multimediali.

Per rendere flessibili le immagini, aggiungi semplicemente max-width:100% e height:auto . Image max-width:100% e height:auto funziona in IE7, ma non in IE8 (sì, un altro bug di IE strano). Per risolvere questo problema, è necessario aggiungere width:auto\9 per IE8.

fonte: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } 

E se vuoi applicare una larghezza massima fissa dell’immagine, inseriscila semplicemente in un contenitore, ad esempio:

 

JSFiddle esempio qui . Non è richiesto JavaScript. Funziona nelle ultime versioni di Chrome, Firefox e IE (che è tutto ciò che ho testato).

 window.onresize = function(){ var img = document.getElementById('fullsize'); img.style.width = "100%"; }; 

In IE l’evento onresize viene triggersto in ogni cambiamento di pixel (larghezza o altezza), quindi potrebbe esserci un problema di prestazioni. Ritarda il ridimensionamento delle immagini per pochi millisecondi usando javascript’s window.setTimeout ().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Impostare la proprietà di ridimensionamento su entrambi. Quindi puoi cambiare larghezza e altezza in questo modo:

 .classname img{ resize: both; width:50px; height:25px; } 

Stai usando jQuery?

Perché ho fatto una rapida ricerca sui plug-in jQuery e sembra che abbiano qualche plugin per farlo, controlla questo, dovrebbe funzionare:

http://plugins.jquery.com/project/jquery-afterresize

MODIFICARE:

Questa è la soluzione CSS, aggiungo solo uno style = “width: 100%” , e funziona per me almeno in chrome e Safari. Non ho cioè, quindi prova solo lì e fammi sapere, ecco il codice:

   

Soluzione 2018:

Usare le unità relative alla vista dovrebbe rendere la tua vita più facile, dato che abbiamo l’immagine di un gatto:

gatto

Ora vogliamo questo gatto all’interno del nostro codice, rispettando le proporzioni:

 img { width: 100%; height: auto; } 
 cat 

Puoi usare la proprietà della scale CSS3 per ridimensionare l’immagine con css:

 .image:hover { -webkit-transform:scale(1.2); transform:scale(1.2); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } 

Ulteriori letture :

  • Trasformazioni 2D CSS3
  • Transizioni Effetto Hover CSS3, Trasformazioni, Animazioni

Inizialmente, stavo usando il seguente html / css:

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } 
 

Poi ho aggiunto class="img" al

questo modo:

 

E tutto ha iniziato a funzionare bene.