Responsive-image-max-Höhe 100% funktioniert nicht in firefox

ich bin gerade dabei ein Bild zu machen, die Größe je nach browser Dimensionen. Ich habe es geschafft, das Bild zu skalieren horizontal, wenn ich das browser-Fenster zu schmal, das Bild vergrößern /verkleinern sich proportional gut. Wenn ich mir jedoch die Größe des Fensters vertikal, Firefox scheint einfach nicht zu wollen, es zu tun! Der code ist ziemlich einfach

<body>

    <div id="content">
        <img src="images/abc.jpg">
    </div>      

</body>

und CSS:

#content {  
    height: 100%;
    padding: 50px;
}


#content img{
    max-height:100%;
    max-width: 100%;
}

Weiteres Problem ist, dass das Bild hat scheinen, um die Größe vertikal in Chrom, aber ich ziehen Sie den unteren Rand des browser-auch über das Bild, bevor Sie beginnen, dies zu tun. Ich würde eher das Bild starten Sie auf Größe ändern auf, sobald die unten content padding "trifft" unten das Bild, so zu sprechen. Hoffe, das macht Sinn.

Jede Hilfe viel geschätzt

  • Können Sie uns ein Bild-Beispiel? Welche Dimensionen hat abc.jpg haben?
  • Ich denke, die Höhe von #content wird wohl mehr als 100%, da Sie mit Polsterung. Im Grunde ist es fügt 50+50 von oben und unten !!! Um zu überprüfen, können Sie versuchen, geben eine bestimmte Höhe, um den Körper
  • Ok, abc.jpg ist groß. so dass Sie sehen können, wie viel detail auf welchem Bildschirm Sie sehen es auf. Sagen 1500 x 1000 px
  • duMpty, mit einem Satz Höhe scheint nicht zu funktionieren, sorry
  • Ich wollte nicht sagen, dass das einstellen der Höhe gehen, um zu arbeiten!!! Ich habe Ihnen gerade die Idee 🙂
Schreibe einen Kommentar