Seitenverhältnis mit minimaler/maximaler Höhe/Breite beibehalten?
Lesezeit: 1 Minute
Panthro
Ich habe eine Galerie auf meiner Website, wo Benutzer Bilder hochladen können.
Ich möchte, dass die Bilder in einem Div sitzen, das seine Höhe beibehält, die Bilder sollten nicht größer als 500 Pixel sein. Die Breite sollte automatisch sein, um das Seitenverhältnis beizubehalten.
Das obige funktioniert gut, die Galerie ist immer 500 Pixel hoch und Bilder überschreiten nie eine Höhe von 500 Pixel. Ich habe jedoch Probleme mit kleineren Bildern. Wenn ein Benutzer ein wirklich kleines Bild hochlädt, möchte ich, dass es auf mindestens 200 Pixel “aufgeblasen” wird. Ich weiß, dass dies erreicht werden kann, indem man a einstellt min-height Auf dem Bild ist das Problem dabei, wenn das Bild weniger als 200 Pixel hoch, aber sagen wir 2000 Pixel breit ist, wird das Bild auf 200 Pixel hoch gesprengt, aber dann wird das Seitenverhältnis geschraubt, da das Bild breiter ist als das Bilder übergeordnete div.
Wie kann ich eine Mindesthöhe haben, aber das Seitenverhältnis beibehalten?
Das ist keine CSS-Syntax – verwenden Sie eine Sprache wie SASS oder Stylus oder ist das nur ein Fehler?
– Semikolon
23. November 2014 um 22:00 Uhr
Das erste, was mir in den Sinn kommt, ist die Verwendung von Hintergrundbildern mit Hintergrundgröße: enthalten, aber das würde nicht funktionieren, wenn Sie <= IE8 abdecken müssen.
– Semikolon
23. November 2014 um 22:06 Uhr
Wenn Sie die Kontrolle über die HTML-Ausgabe haben, verwenden Sie die serverseitige Verarbeitung, um das Seitenverhältnis zu bestimmen, fügen Sie dann eine “Wide”- oder “Tall”-Klasse hinzu und handhaben Sie deren Styling separat. Wenn Sie keine Kontrolle über HTML haben, verwenden Sie Javascript, um dasselbe zu tun, und formatieren Sie sie erneut separat.
– achtsame Stille
29. Januar 2017 um 4:14 Uhr
Die gesuchte Immobilie ist object-fit. Dies ist eine der Innovationen von Opera, Sie können mehr darüber in ihrem lesen Entwicklerartikel von 2011 über Objektanpassung (ja, das gibt es schon so lange). Vor ein paar Jahren hätte ich es dir nicht empfehlen können, aber caniuse zeigt, dass alle anderen aufholen:
Ein Problem bei dieser Sullotion besteht darin, dass sie nur das eigentliche Bild und nicht das img-Tag dazu zwingt, Proportionen zu enthalten. Wenn Sie also beispielsweise einen Rahmen um das Bild-Tag legen, werden die Proportionen nicht beibehalten: jsfiddle.net/pwxca5af
– Karl Papworth
4. Januar 2017 um 14:29 Uhr
Vielen Dank! Es funktioniert perfekt, wenn Sie Orte definieren möchten, an denen ein Bild sein wird, aber Sie es wegen Netzwerkverzögerung noch nicht geladen haben. Ich kombiniere es mit Lazy Load auf einem großen Raster von 4×20 Bildelementen.
– gtamboro
16. November 2018 um 10:45 Uhr
@brsfan es scheint, dass Edge heute Object-Fit implementiert hat. Es klappt!
– gtamboro
16. November 2018 um 10:48 Uhr
Die einzige Möglichkeit, die ich kenne, um dies möglicherweise zu erreichen, besteht darin, entweder die width oder height zu auto.
Ich habe ausgelassen this.naturalHeight aus meinem ursprünglichen post, also wäre die bildhöhe immer entweder 200px oder 500px. Jetzt kann es Werte dazwischen annehmen.
– Rick Hitchcock
23. November 2014 um 23:04 Uhr
walisisch
Eigentlich wollte ich etwas Ähnliches machen. Hier ist etwas in jQuery, wenn Sie darauf stehen.
Das ist keine CSS-Syntax – verwenden Sie eine Sprache wie SASS oder Stylus oder ist das nur ein Fehler?
– Semikolon
23. November 2014 um 22:00 Uhr
Das erste, was mir in den Sinn kommt, ist die Verwendung von Hintergrundbildern mit Hintergrundgröße: enthalten, aber das würde nicht funktionieren, wenn Sie <= IE8 abdecken müssen.
– Semikolon
23. November 2014 um 22:06 Uhr
Wenn Sie die Kontrolle über die HTML-Ausgabe haben, verwenden Sie die serverseitige Verarbeitung, um das Seitenverhältnis zu bestimmen, fügen Sie dann eine “Wide”- oder “Tall”-Klasse hinzu und handhaben Sie deren Styling separat. Wenn Sie keine Kontrolle über HTML haben, verwenden Sie Javascript, um dasselbe zu tun, und formatieren Sie sie erneut separat.
– achtsame Stille
29. Januar 2017 um 4:14 Uhr