• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsive Anzeigegröße von Bildern per CSS auf physikalische Größe begrenzen?

TryHard

Neues Mitglied
Liebe Experten,

ich konnte hierzu noch keine Lösung finden: Im Fenster werden Fotos zentriert angezeigt, welche mit:

Code:
img {
    max-width: 70vmin;
    max-height: 70vmin;
}

formatiert sind. Diese Angabe sorgt dafür, dass sowohl hoch- als auch querformatige Bilder ähnlich groß angezeigt werden, da sie quasi in einem "virtuellen Quadrat" eingepasst sind, welches 70 % der kürzeren Viewport-Seite groß ist. Dieses Quadrat macht die Bildgröße zugleich unabhängiger davon, ob es sich um einen hoch- oder querformatigen Viewport handelt. Das scheint so weit gut zu funktionieren.

Aus qualitativen Gründen möchte ich die Anzeigegröße der Fotos jedoch zusätzlich gern auf ihre physikalische Auflösung, also die tatsächliche Pixelgröße der Bilddatei begrenzen. Es soll also niemals höher oder breiter angezeigt werden, als es auch entsprechende Bildpixel gibt. Das Bild soll also niemals vergrößert werden, der Browser soll keine Pixel hinzuinterpolieren. Auf hochaufgelösten Monitoren würde das Bild ggf. etwas kleiner angezeigt werden, was so gewünscht ist.

Bei Recherchen stoße ich immer wieder auf die Variante, die Breite mit max-width und die Höhe mit "auto" anzugeben. Das funktioniert jedoch spätestens mit hochformatigen Bildern nicht mehr , da hier entsprechend die Höhe begrenzt werden müsste.

Es sollen auch nicht verschieden aufgelöste Bilddateien für unterschiedliche Monitorauflösungen verwendet werden, sondern jeweils nur eine Bilddatei.

Mit etwas Javascript-Aufwand ließe sich das zwar hinkriegen, lässt es sich aber nicht auch einfacher mit CSS umsetzen? - ich hätte lieber eine CSS-Lösung.

Herzlichen Dank für eure Tipps!
 
Zuletzt bearbeitet:
Werbung:
Super, Zorro! Im Wesentlichen funktioniert´s!

Komisch ist, dass die Bilder im Browser dennoch generell etwas größer und unschärfer dargestellt werden, als im direkten Vergleich etwa mit Photoshop bei 100%. Das liegt vermutlich einfach an den Darstellungsalgorithmen der Browser? Habe testweise auch

Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

probiert, was aber auf dem Desktop-Rechner keinen Unterschied macht. Für Fotografen ist es ein Elend, weil man denkt, dass man selbst 2022 im WWW seine Bilder nicht in einer guten Qualität zeigen kann - in Photoshop sehen sie um Meilen besser aus.

Falls du hierzu noch einen Hinweis hast, freue ich mich. Ansonsten bin ich mit dem Ergebnis aber auch jetzt schon sehr zufrieden - herzlichen Dank noch mal für die superschnelle Unterstützung!
 
Ein paar eigene Erkenntnisse zu meiner Nachfrage bzgl. der schlechten Bildqualität im Browser:

Wenn ich etwa über

www.browsercheck.me

die Fenstergröße anzeigen lasse, so liegt diese in etwa bei der Hälfte der physikalischen Auflösung meines Retina Displays. Photoshop hingegen scheint diese voll nutzen zu können. Daher der Größen- als auch der Qualitätsunterschied. Beispielsweise hier werden Vorschläge gemacht, um eine höhere Bildauflösung nutzen zu können, welche jedoch zwei Bilddateien verwendet:


In meiner PHP-Website mit ausgelesenem und zufällig durchmischtem Bilderarray ist mir der Weg mit unterschiedlichen Bilddateien voraussichtlich leider zu aufwändig.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben