Mit CSS3 ist es ja nun einfach möglich, Hintergrundbilder formatfüllend zu skalieren.
Der Befehl
hat für mich dabei die besten Resultate erzielt.
Nun ist es aber so, dass ich eine Slideshow mit verschiedenen Bildern erstellen möchte, bei der sich die angezeigten Bilder abwechseln. Hierfür ist leider der background-Befehl nicht möglich, da ich mit dem <img>-Tag in einem <div> arbeiten muss.
Gibt es ähnliches für normale <img>-Tags?
Bisher hatte ich das gelöst mit:
Hier ist aber eben das Problem, dass das Bild nicht völlständig runterskaliert wird. Wenn die Fenstergröße kleiner ist, als die Originalbildgröße (Bild ist zum Beispiel 1000 px breit und das Fenster wird auf 500 px gezogen), bleibt das Bild nämlich unberührt und ein Teil des Bildes wird abgeschnitten, obwohl es auch für diese Größe sauber skaliert werden könnte (siehe background-size: cover
Ich suche im Endeffekt ein äquivalent zum background-size-Befehl für einen img-Tag. Ich möchte es ungern mit JavaScript oder ähnlichem lösen und bin deswegen für jede Hilfe dankbar!
Nachtrag: Ich glaube, dass es nicht so einfach nur mit CSS funktioniert. Der DIV müsste dazu immer die gleiche Proportionen haben (unabhängig von der Fenstergröße) und somit, je nach Fenstergröße auch größer als das eigentlich sichtbare Fenster sein, also drüber hinweg laufen.
Ist dieser Gedankengang korrekt?
Dann wäre ich für jede andere Lösung dankbar.
Der Befehl
Code:
background-size: cover;Nun ist es aber so, dass ich eine Slideshow mit verschiedenen Bildern erstellen möchte, bei der sich die angezeigten Bilder abwechseln. Hierfür ist leider der background-Befehl nicht möglich, da ich mit dem <img>-Tag in einem <div> arbeiten muss.
Gibt es ähnliches für normale <img>-Tags?
Bisher hatte ich das gelöst mit:
Code:
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
}
#background img {
margin: auto;
min-height:100%;
min-width:100%;
}Hier ist aber eben das Problem, dass das Bild nicht völlständig runterskaliert wird. Wenn die Fenstergröße kleiner ist, als die Originalbildgröße (Bild ist zum Beispiel 1000 px breit und das Fenster wird auf 500 px gezogen), bleibt das Bild nämlich unberührt und ein Teil des Bildes wird abgeschnitten, obwohl es auch für diese Größe sauber skaliert werden könnte (siehe background-size: cover
Ich suche im Endeffekt ein äquivalent zum background-size-Befehl für einen img-Tag. Ich möchte es ungern mit JavaScript oder ähnlichem lösen und bin deswegen für jede Hilfe dankbar!
Nachtrag: Ich glaube, dass es nicht so einfach nur mit CSS funktioniert. Der DIV müsste dazu immer die gleiche Proportionen haben (unabhängig von der Fenstergröße) und somit, je nach Fenstergröße auch größer als das eigentlich sichtbare Fenster sein, also drüber hinweg laufen.
Ist dieser Gedankengang korrekt?
Dann wäre ich für jede andere Lösung dankbar.
Zuletzt bearbeitet:
