nicht angemeldet
Hallo Gunnar (und alle anderen),
ich antworte mal nur hier, da hier der entscheidende Hinweis war.
Wie soll er auch? Wenn die Bedingung
height > widtherfüllt ist, schaltest du was um, sodass die Bedingung nicht mehr erfüllt ist, sodass wieder umgeschaltet wird, woraufhin die Bedingung wieder erfüllt ist, also wieder umgeschaltet wird, sodass …
Ich hatte nicht auf dem Schirm, dass meine Klassenumschaltung ja Einfluss auf das Objekt hatte, dass ich überwacht habe. Mannomann...
Aber wozu überhaupt das JavaScript??[^1]
Was willst du erreichen, was mit
orientationmedia query undpicture-Element nicht zu erreichen wäre?Mir schwant, du willst genau das dort im Beispiel Gezeigte.
Nicht genau das gezeigte. Aber die Erkennung Landscape/Portrait, die ich kompliziert mit JS zurechtwürgen wollte, funktioniert damit hervorragend :-)
Damit können wir sogar schon zu meinem eigentlichen Problem kommen. Und zwar suche ich im Prinzip eine equivalente Funktion von background-size: contain für img. Ich möchte also, dass der (Handy-)Bildschirm immer optimal ausgenutzt wird. Das hab ich mit diesem CSS-Fragment versucht nachzubilden:
@media (orientation: portrait) {
img {
max-width: 100%;
height: auto;
}
}
@media (orientation: landscape) {
img {
width: auto;
max-height: 100%;
}
}
Aber man kann offenbar nur die width eines img mit Prozent beeinflussen. Für height funktioniert das nur, wenn ich px eintrage (da müsste dann wieder JS ran). object-fit: contain hatte ebenfalls keinen Einfluss. Hab ich das falsch angewendet?
Hier mal der neue Test plus Quelltext:
https://fsv-optik.de/tests/test_img_media.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
object-fit: contain;
}
@media (orientation: portrait) {
img {
max-width: 100%;
height: auto;
}
}
@media (orientation: landscape) {
img {
width: auto;
max-height: 100%;
}
}
</style>
</head>
<body>
<picture>
<img src="test_img_media.jpg">
</picture>
</body>
</html>
Schöne Grüße
Nico
Gunnar Bittersmann
Matthias Scharwies