Le immagini reattive non verranno ridimensionate con Firefox man mano che le dimensioni dello schermo vengono regolate. Lavori in altri browser

Question

Sono nuovo di immagini responsive, ma hanno capito come ottenere le mie immagini in scala in Safari, Opera e Chrome (non so su IE) con il seguente CSS:

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

Al variare della dimensione dello schermo, l'immagine viene ridimensionata. In Firefox, l'immagine non viene ridimensionata, a meno che non cambi la larghezza: auto alla larghezza: 100%; Quindi Safari elabora l'immagine su nulla caricandola o ricaricandola; sebbene, liquidare il contante lo faccia a grandezza naturale. Sto lavorando su Drupal con il tema reattivo di Zen 7.5-dev. E sto mantenendo i miei file CSS in SASS, ma questo è probabilmente solo un problema CSS. Forse mi sono perso qualcosa nel lato HTML 5 o CSS3.

In ogni caso, ho avuto cose su cui lavorare sovrascrivendo la larghezza Larghezza una direttiva specifica Firefox in questo modo:

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */ 
@-moz-document url-prefix() { 
    img { 
    width: 100%; 
    } 
} 

Non credo che avrei dovuto fare questo, e googling non sembra venire attraverso questo problema.

Answer 1

È probabile che l'immagine si trovi all'interno di un contenitore con involucro termoretraibile, che deve quindi calcolare la larghezza in base alla larghezza dell'immagine. E quindi la larghezza massima dell'immagine è pari al 100% della larghezza del contenitore.

Se ciò che sta succedendo, la specifica CSS in realtà non definisce il comportamento di tale markup, in cui la larghezza del genitore dipende dal bambino e la larghezza del bambino dipende dal genitore.

Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=823483 per una discussione sulla questione.

Answer 2

Ho problema simile, e scoperto impostazione max-width sull'elemento involucro risolve il problema pò. (Testato solo con Firefox 23, ma dovrebbe funzionare anche con Firefox precedente.) Vedi anche questi JSFiddle:

• http://jsfiddle.net/CLUGX/ (dimostrano il problema su Firefox)
• http://jsfiddle.net/CLUGX/1/ (usa max-width su involucro per risolvere il problema)
• http://jsfiddle.net/CLUGX/4/ (dimostrare che le opere di dimensionamento sensibili, provare a ridimensionare cornice interna)

Prima max-width:

Dopo max-width:

Una cosa da notare, tuttavia, se si capita di impostare padding sull'elemento involucro, non sarà presa in img 's calcolo larghezza e causerà risultati inconsistenti tra Firefox e Safari (http://jsfiddle.net/CLUGX/3/):

Answer 3

Questo è il CSS predefinito utilizzato per le immagini sensibili:

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

E questa è l'indispensabile Javascript: Bongard.net

Grazie a David Bongard per il Javascript.

Ora aggiungere il seguente alla regola "se safari" dello script:

for (var i = 0; i < document.getElementsByTagName("img").length; i++) { 
    document.getElementsByTagName("img")[i].style.width = "auto"; 
    } 

Safari vuole width:auto; il resto dei browser ho provato sono felici con width:100%;

Answer 4

Questo funziona per me

@-moz-document url-prefix() { 
    img{ 
     width: 100%; 
     max-width: 100%; 
    } 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {  
    img{ 
     max-width: 100%; 
    }  
} 

Answer 5

ho appena avuto questo problema e trovato una soluzione: Quando ho creato l'IMG max-width in mio foglio CSS, niente succede - l'immagine non verrà ridimensionata. Quando imposto max-width nella pagina stessa, dove viene richiamata l'immagine, funziona in tutti i browser e su tutti i dispositivi.

No:

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

Sì:

<img src ="image.jpg" style="max-width:100%; height:auto;"> 

Se chiunque può fare una certa luce di saggezza su questo, si prega di fare.

Answer 6

Ho usato il jsfiddle di Krasada Thanabulpong ma l'ho fatto funzionare solo quando ho rimosso il display: il tavolo del div che avvolge la mia immagine.

Answer 7

Se si utilizza la larghezza per un'immagine in px o dato imbottitura o display utilizzato: tavolo invece di display: block per l'immagine, quindi l'immagine di risposta potrebbe non funzionare correttamente su alcuni/tutti i browser

Answer 8

Ebbene dopo aver provato tutto i tipi di codici e fidles, questo semplice edizione sul mio css ha fatto il trucco per me:

img {width: 100%;} 

Semplicemente allora dove si desidera le immagini da ridimensionare, a definire senza aggiungere il parametro "larghezza" (dimensionamento di originale da fonte); e poi se vuoi correggere la loro dimensione, aggiungi semplicemente il parametro "width" nello stile SRC (la larghezza regolare = "" la definizione non funzionerà). Se si tratta di un'immagine in linea sul tuo paragrafo, basta avvolgerlo in un div e allineare quel div a qualsiasi lato desideri. Reeeeally simple!

Funziona sia per Google, Firefox e IE. Saluti!