Come posso ridimensionare un'immagine dinamicamente con CSS al variare della larghezza / altezza del browser?

Chissà come avrei potuto ridimensionare un'immagine insieme alla finestra del browser, ecco cosa ho fatto fino ad ora (oppure scaricare l'intero sito in uno ZIP ).

Funziona bene in Firefox, ma ha problemi in Chrome: l'immagine non si ridimensiona sempre, dipende in qualche modo dalle dimensioni della finestra quando la pagina è stata caricata.

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

Qualche idea su come potrei renderlo più a prova di proiettile? (Se sarà necessario JavaScript, posso conviverci anch'io, ma è preferibile CSS.)

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

Per rendere le immagini flessibili, aggiungi semplicemente max-width:100%e height:auto. Immagine max-width:100%e height:autofunziona in IE7, ma non in IE8 (sì, un altro strano bug di IE). Per risolvere questo problema, è necessario aggiungere width:auto\9per 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, posizionala semplicemente all'interno di un contenitore, ad esempio:

<div style="max-width:500px;">
    <img src="..." />
</div>

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

Soluzione 2018 e successive:

L'utilizzo di unità relative al riquadro di visualizzazione dovrebbe semplificarti la vita, dato che abbiamo l'immagine di un gatto:

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

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Finora non molto interessante, ma cosa succederebbe se volessimo modificare la larghezza dei gatti in modo che sia il massimo del 50% del riquadro di visualizzazione?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

La stessa immagine, ma ora limitata a una larghezza massima di 50vw vw (= larghezza del viewport) significa che l'immagine sarà la larghezza X del viewport, a seconda della cifra fornita. Questo funziona anche per l'altezza:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Ciò limita l'altezza dell'immagine a un massimo del 20% del viewport.

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

In IE l' onresizeevento viene attivato a ogni modifica di pixel (larghezza o altezza), quindi potrebbe esserci un problema di prestazioni. Ritarda il ridimensionamento dell'immagine di pochi millisecondi utilizzando window.setTimeout () di javascript.

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

Imposta 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?

Poiché ho fatto una rapida ricerca sui plug-in jQuery e sembra che abbiano alcuni plug-in 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 ie, quindi prova lì e fammi sapere, ecco il codice:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Inizialmente, stavo usando il seguente html / css:

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

<div> 
  <img src="..." />
</div>

Quindi ho aggiunto class="img"a <div> questo:

<div class="img">
  <img src="..." />
</div>

E tutto ha iniziato a funzionare bene.

Puoi utilizzare la scaleproprietà 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 passaggio del mouse CSS3, trasformazioni, animazioni

Usa questo codice. Ciò che la maggior parte sta dimenticando è di specificare la larghezza massima come la larghezza massima dell'immagine

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Controlla questa dimostrazione http://shorturl.at/nBKVY

Provare

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Funziona solo con il blocco di visualizzazione e il blocco in linea, questo non ha alcun effetto sugli elementi flessibili come ho appena passato anni a cercare di scoprirlo.