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 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
versuchen dieses, ergriffen von Twitter bootstrap 2
Weil Höhe potenziell ewig so weitergehen, du kannst nicht legen Sie die Höhe von etwas relativ zum browser-Fenster, um die Funktion der Prozent. Was ich damit sagen will ist, dass Sie brauchen, um es inside etwas mit fester Höhe verwenden, ein Prozent-Wert. Viel Glück!
-b
Haben Sie nur angegeben, das "max-height" und "max-width" Eigenschaften".
Wenn Sie nicht geben Sie die "Breite" oder "Höhe" Eigenschaften, das Bild erstmal nimmt die Breite und die Höhe seiner physischen Dimensionen (wenn nicht größer als der angegebene max-height und max-width).
Sagte, dass das Verhalten Sie bemerkt haben, korrekt ist.
Die Antwort ist, wie bereits erwähnt, geben auch eine erste Breite oder height-Eigenschaft, dependig, ob Ihr Bild im hoch-oder Querformat.
Ist dass, was Sie wollen?
Ich eigentlich nur noch einen Höhe von html und body, so dass #Inhalt-Höhe nicht zu hoch.
(Und box-sizing: border-box zu #content, weil es scheint, dass Sie würde wollen, dass)