Absolut positioniertes Bild an Größe des Containers anpassen

[Nickname]

Hallo,
ich stehe gerade vor einem Problem mit CSS und ich hoffe, ihr könnt mir helfen.
Folgendes:

Ich habe eine simple Slideshow mithilfe von jQuery gemacht. Darin liegen die Bilder übereinander und werden mit der CSS-Eigenschaft z-index nach vorn "gehoben". Die Breite des div-Containers, in dem die Bilder drin sind, ist 60% breit, also dynamisch groß. Die Bilder darin habe ich mit der CSS-Eigenschaft position: absolute alle übereinander platziert, damit immer nur das oberste angezeigt wird. Jedoch soll die Breite der Bilder angepasst sein an den Container, in dem sie enthalten sind (Die Höhe sollte natürlich proportional zur Breite sein, aber das regelt sich normalerweise automatisch). Deshalb habe ich für die Bilder mit CSS folgendes eingestellt: width: 100%. Nur leider ist diese Breite nicht auf Bezug des div-Containers, sondern das ist die Breite des Bildes (denn wenn ich 50% einstelle, ist das Bild eben nur halb so groß), was ja normalerweise nicht der Fall ist.

Ich hoffe ihr könnt mir sagen, wie ich die Breite anpassen kann oder die Bilder auf einer anderen Weise übereinander stapeln kann (denn dann müsste die %-Angabe sich ja wieder auf das Elternelement beziehen).

Danke!

[Tom]

Hello,

ich stehe gerade vor einem Problem mit CSS und ich hoffe, ihr könnt mir helfen.

Wo ist denn der relevante Code?
Lass uns doch bitte nicht im Dunkeln stehen und zeige uns die relevanten HTML- und CSS-Abschnitte.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Nickname]

Hello,

ich stehe gerade vor einem Problem mit CSS und ich hoffe, ihr könnt mir helfen.

Wo ist denn der relevante Code?
Lass uns doch bitte nicht im Dunkeln stehen und zeige uns die relevanten HTML- und CSS-Abschnitte.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

Okay. Also der Container mit den Bildern:

div#content div#slideshow {  
	float: right;  
	width: 60%;  
	max-width: 1280px;  
	border: 2px solid green;  
}

Dann die Bilder:

div#content div#slideshow img {  
	position: absolute;  
	width: 100%;  
	z-index: 1;  
}

Und für das aktuelle Bild:

div#content div#slideshow img.slideshow_current {  
	z-index: 3;  
}

Und in HTML sieht das ganze dann so aus:

<div id="slideshow">  
    <img src="images/slideshow/1.png" class="slideshow_current" />  
    <img src="images/slideshow/2.png" />  
    <img src="images/slideshow/3.png" />  
</div>

Das erste hat schon die entsprechende Klasse, JavaScript ändert das ganze später.

[Bobby]

Moin

Zuerst mal: bitte kein TOFU

Nun zu deinem Problem. Warum sind die Bilder absolut positioniert?

position:relative und width:100% lässt das bild auf die entsprechende Größe anpassen.

Gruß Bobby

[Nickname]

Nun zu deinem Problem. Warum sind die Bilder absolut positioniert?
position:relative und width:100% lässt das bild auf die entsprechende Größe anpassen.

Weil die Bilder dann trotzdem untereinander angeordnet sind. Sie sollen aber übereinander liegen, damit ich einen schönen fade-Effekt benutzen kann.

[Bobby]

Moin

Nun zu deinem Problem. Warum sind die Bilder absolut positioniert?
position:relative und width:100% lässt das bild auf die entsprechende Größe anpassen.

Weil die Bilder dann trotzdem untereinander angeordnet sind. Sie sollen aber übereinander liegen, damit ich einen schönen fade-Effekt benutzen kann.

Ah ok... nun rückst du mit den Angaben raus. Einen FAdeeffekt über Javascript wird also benutzt.

Eine Möglichkeit ist dem Elternelement ein position:relative zu geben und die Bilder mit width:100% an diesen trotz absoluter Positionierung anpassen zu lassen. Am besten noch mit Top:0 left:0

Dann sollte es funktionieren

Gruß Bobby

[Nickname]

Eine Möglichkeit ist dem Elternelement ein position:relative zu geben und die Bilder mit width:100% an diesen trotz absoluter Positionierung anpassen zu lassen. Am besten noch mit Top:0 left:0

Danke dir! Das funktioniert.
Nur der Rahmen geht nicht um die Bilder, sondern tut so, als ob nichts darin wäre. Könntest du mir netterweise auch sagen, wie ich das beheben kann?

[Bobby]

Moin

Nur der Rahmen geht nicht um die Bilder, sondern tut so, als ob nichts darin wäre. Könntest du mir netterweise auch sagen, wie ich das beheben kann?

Na eins muss sich am anderen ausrichten. Entweder der Rahmen an den Bildern oder die Bilder an den Rahmen. Bei einer absoluten Positionierung der Bilder richtet sich der Rahmen niemals auf diese aus, da diese ja aus dem natürlichen Seitenfluß herausgelöst sind.

Einfachste Lösung, Gib dem Rahmen ne Größe ;)

Gruß Bobby

[Nickname]

Na eins muss sich am anderen ausrichten. Entweder der Rahmen an den Bildern oder die Bilder an den Rahmen. Bei einer absoluten Positionierung der Bilder richtet sich der Rahmen niemals auf diese aus, da diese ja aus dem natürlichen Seitenfluß herausgelöst sind.

Einfachste Lösung, Gib dem Rahmen ne Größe ;)

Eine Breite hat der Rahmen ja. Und die Größe berechnet sich durch das Bild. Gibt es keine Eigenschaft, bei der der Rahmen alle Elemente beinhaltet?

[ChrisB]

Hi,

Eine Breite hat der Rahmen ja. Und die Größe berechnet sich durch das Bild. Gibt es keine Eigenschaft, bei der der Rahmen alle Elemente beinhaltet?

Nicht bei absoluter Positionierung, das wurde ja schon erklärt.

Aber da du ja eh schon jQuery einsetzt, sollte es ja kein großes Problem sein, die nötige Höhe damit zu ermitteln.

MfG ChrisB

[Tom]

Hello,

Danke dir! Das funktioniert.
Nur der Rahmen geht nicht um die Bilder, sondern tut so, als ob nichts darin wäre. Könntest du mir netterweise auch sagen, wie ich das beheben kann?

Das hatten wir doch neulich erst?

Schau mal, ob Du mit dem neuen Konzept "Box-Sizing" weiter kommst.
http://www.css-wiki.com/css-eigenschaft/box-sizing

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Tom]

Hello,

Und in HTML sieht das ganze dann so aus:

Das Element #content hattest Du jetzt nur vergessen, hinzuschreiben?

  
<div id="content">  
    <div id="slideshow">  
        <img src="images/slideshow/1.png" class="slideshow_current" />  
        <img src="images/slideshow/2.png" />  
        <img src="images/slideshow/3.png" />  
    </div>  
</div>  

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Nickname]

Das Element #content hattest Du jetzt nur vergessen, hinzuschreiben?

In 'content' ist noch mehr enthalten, als nur die Slideshow. Deswegen ist die Slideshow auch nur 60% breit und rechts angeordnet.