# Bild in div immer ausgefüllt



## achterbahnfreak (22. April 2014)

Hi, 

anscheinend schein ich zu blöd dafür zu sein, aber folgendes Problem:

Ich besitze ein div mit einer Höhe von 600px und 100% Breite. In diesem div befindet sich ein Bild (als <img>-Tag). Dieses soll das div immer ausfüllen, dabei soll es aber nicht verzehrt werden. Auch wenn die Seite verkleinert wird, soll das Bild das div immer ausfüllen. Gerne kann da auch etwas abgeschnitten werden.

Jemand ne Idee wie das funktioniert oder wo ich Tutorials dazu finde?


----------



## SpiceLab (22. April 2014)

So füllt das Grafikelement sein Elternelement aus:

```
div img {width:100%;height:600px}
```


----------



## achterbahnfreak (22. April 2014)

Beim Verkleinern, ist das Bild jedoch nicht 600px hoch.


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Beim Verkleinern, ist das Bild jedoch nicht 600px hoch.


Die Höhenangabe beider Elemente ist fix, also kann sich da nichts ändern.


----------



## achterbahnfreak (22. April 2014)

Stimmt, war noch ein anderer CSS Befehl im Weg. Allerdings wird es beim Zusammenschieben verzerrt, also gestaucht...


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Allerdings wird es beim Zusammenschieben verzerrt, also gestaucht...


Das ist normal mit der relativen Breite.


----------



## achterbahnfreak (22. April 2014)

spicelab hat gesagt.:


> Das ist normal mit der relativen Breite.



Wie kann man das dann umgehen? So, dass es schön mit skaliert?


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Wie kann man das dann umgehen? So, dass es schön mit skaliert?


Indem die Proportionen (Seitenverhältnis) des Bildes erhalten bleiben.


----------



## achterbahnfreak (22. April 2014)

Und wenn die Proportionen nicht erhalten bleiben? Würde das mit Javascript gehen?

Ich brauch genau sowas wie Superized (http://buildinternet.com/project/supersized/) nur innerhalb eines Divs und für einen <img>-Tag statt eines Hitnergrundbildes.


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Und wenn die Proportionen nicht erhalten bleiben? Würde das mit Javascript gehen?


Nein, JS kann an der Natur der Sache auch nichts ändern.


----------



## achterbahnfreak (22. April 2014)

Ich brauch eigentlich nur sowas wie Superized (http://buildinternet.com/project/supersized/) nur innerhalb eines Divs und für einen <img>-Tag statt eines Hitnergrundbildes. 

Das wird doch iwie gehen?


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Ich brauch eigentlich nur sowas wie Superized (http://buildinternet.com/project/supersized/) nur innerhalb eines Divs und für einen <img>-Tag statt eines Hitnergrundbildes.
> 
> Das wird doch iwie gehen?


Wie es geht, habe ich dir eingangs gezeigt.

Wenn sich das Motiv beim Skalieren des Browserfensters verzerrt, dann liegt es an besagter Bilddimension, die in deinem Fall in der Breite relativ bzw. variabel und in der Höhe fix sein soll.


----------



## achterbahnfreak (22. April 2014)

Bei Supersized ist doch die Proportion auch egal. Wenn etwas nicht passt, wird es einfach zurecht geschnitten..


----------



## SpiceLab (22. April 2014)

achterbahnfreak hat gesagt.:


> Bei Supersized ist doch die Proportion auch egal. Wenn etwas nicht passt, wird es einfach zurecht geschnitten..


Dafür sorgen im JS diese Zeilen, um das Bild im Browserfenster horizontal und vertikal zu zentrieren:


```
// Horizontally Center
if (base.options.horizontal_center){
	$(this).css('left', (browserwidth - $(this).width())/2);
}

// Vertically Center
if (base.options.vertical_center){
	$(this).css('top', (browserheight - $(this).height())/2);
}
```

Wenn man diese Positionsangaben betrachtet, handelt es sich hierbei wohl nicht um Hintergrundbilder, wie von dir angenommen/verlautbart, sondern um *<img>*-Elemente. Es sei denn, dies gilt für die verwendeten *<li>*-Elemente in der Slideshow.


----------



## achterbahnfreak (23. April 2014)

Hab eine Lösung gefunden:

-> http://johnpolacek.github.io/imagefill.js/

Trotzdem danke für deine Hilfe.


----------



## SpiceLab (23. April 2014)

achterbahnfreak hat gesagt.:


> Hab eine Lösung gefunden:
> 
> -> http://johnpolacek.github.io/imagefill.js/
> 
> Trotzdem danke für deine Hilfe.


Keine Ursache 

Und du weißt ja: "Viele Wege führen nach Rom" ;-)


----------

