Larghezza automatica dell'immagine in CSS per tutti i browser?

Question

Ho il mio tag img definito con un po 'di CSS come:

img 
{ 
    width: auto !important; 
    height: auto !important; 
    max-width: 100%; 
} 

funziona bene in alcuni dei browser per dispositivi mobili che ho provato, così come Google Chrome su un desktop. Tuttavia, non sembra funzionare in IE o FireFox. Con quello, voglio dire, mentre ridimensionate la finestra. Dai un'occhiata a un sito sandbox su cui sto lavorando: http://terraninstitute.com. Ho l'immagine sulla home page intenzionalmente impostata per essere un'immagine enorme. Passare anche alle Informazioni (menu principale) quindi Nuovi arrivati ​​(menu laterale) e notare l'immagine della mappa in basso. Sul mio Droid (e su alcuni altri dispositivi su cui riesco a mettere le mani) così come su Google Chrome questo sembra abbastanza buono. In IE e FireFox, non così tanto.

Mi manca qualcosa? Definizioni di stile in conflitto? Non li trovo ancora, se lo è.

TIA

Answer 1

Stai dichiarando la larghezza delle vostre immagini più volte nel documento inutilmente e dichiarando un max -width nel modo sbagliato. Max-width si suppone di definire una dimensione massima/limite per le immagini (600px, ad esempio), se si dichiara larghezza massima: 100% in combinazione con larghezza: 100%, non si sta realmente facendo nulla con quello dichiarazione in quanto le immagini si espanderanno al 100% così com'è.

Rimuovere le dichiarazioni di larghezza dal CSS nelle seguenti righe:

linea 116: eliminare la dichiarazione img tutti insieme, non è necessario.

linea 365: rimuovere l'attributo max-width:100% e height:auto; in quanto non sono necessari (e se è possibile eliminare la dichiarazione tutti insieme come è possibile dichiarare che altrove)

linea 121: Ora basta attaccare con questo e solo aggiungere il seguente:

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

Answer 2

Non utilizzare !important

Fai la tua CSS più speficic:

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

Answer 3

in style.css linea riga 116, 212 e inuit.css linea 365. Rimuovere tutti quelli.

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

Questo è tutto ciò che serve.

Answer 4

Bootstrap soluzione per le immagini responsive:

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 

    /* Part 1: Set a maxium relative to the parent */ 
    max-width: 100%; 

    /* IE7-8 need help adjusting responsive images */ 
    width: auto\9; 

    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    height: auto; 

    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}