# Bild formatfüllend skalieren



## tluebke (11. Juli 2013)

Mit CSS3 ist es ja nun einfach möglich, Hintergrundbilder formatfüllend zu skalieren.

Der Befehl

```
background-size: cover;
```
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:

```
#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.


----------



## Jan-Frederik Stieler (12. Juli 2013)

Hallo,
auf CSS Tricks gibt es ein Workaround für deine Problemstellung:
http://css-tricks.com/perfect-full-page-background-image/

Grüße


----------



## tluebke (12. Juli 2013)

Danke für deine Antwort. Hatte dort jedoch nicht das gefunden, was ich gesucht hatte.
Habe aber durch ändern der Google-Stichwörter ein sehr schönes Script gefunden. Ist zwar etwas fummelig mit den Zeiten, aber für meine Zwecke völlig ausreichend und auch sehr variabel.
http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

Das Ganze wird hier nochmals etwas besser erklärt: (http://digitalnative.me/tutorial/vollbild-hintergrund-slideshow-css3/)


----------

