Liebe Experten,
ich konnte hierzu noch keine Lösung finden: Im Fenster werden Fotos zentriert angezeigt, welche mit:
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!
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: