2010-01-19 13 views
7

Sto sviluppando un sito Web per un professore e sto avendo un problema con il mio CSS in Firefox. Il sito Web è stato progettato per essere di larghezza/altezza fluida in modo da riempire lo schermo con qualsiasi risoluzione, quindi a causa di ciò sto utilizzando un sacco di percentuali per altezze e larghezze. Tuttavia, ho riscontrato un problema con le immagini.Firefox ignora l'altezza percentuale sull'immagine

http://projects.mediabounds.com/i.bradley.edu/

La barra superiore di miniature dovrebbe scala le immagini, ma non funziona in Firefox, le immagini rimangono al 100% la loro altezza originaria. Funziona bene in Safari (non so su Internet Explorer). Ho impostato l'altezza al 100% e la larghezza all'auto. Mi aspetto che riduca l'immagine al 100% dell'altezza del div e quindi aggiusti la larghezza di conseguenza.

Qualcuno può dire cosa mi è mancato?

+0

Utilizzo Toolbar per sviluppatori Firebug/Web per provare a tenere traccia dei problemi nel mio CSS. Secondo Firebug, l'img sta ottenendo il valore di 100% di altezza e larghezza automatica. –

+0

1. Non riesci a vedere la "barra in alto delle miniature" di cui stai parlando. 2. Se non trovi una risposta qui potresti provare a postare su http://doctype.com – Alconja

+1

Ho avuto un problema simile in FF e IE. Funziona bene in Chrome. –

risposta

4

È necessario fornire l'altezza dell'immagine al 100%, ma l'elemento padre deve essere l'altezza e la larghezza desiderate in percentuale.

Fondamentalmente creare un DIV contenente l'immagine, fornire al DIV la larghezza e l'altezza desiderate in percentuale o px. Posiziona l'immagine all'interno del DIV e assegna l'altezza al 100%.

Questo è solo il modo in cui Firefox gestisce le immagini.

1

Mi sono imbattuto anche in questo e sono riuscito ad ottenere un'altezza consistente su più browser utilizzando vh unità in CSS, ad esempio max-height: 5vh; come nel 5% dell'altezza del viewport.