Bild auf 100% der Breite des Elternelementes strecken

[Apropos]

Hi,

bekanntlich verhalten sich width und height mit Prozentangaben bei Bildern bzw. img-Tags anders als üblich, da sie sich nicht auf den verfügbaren Raum beziehen, sondern auf die Originalgröße des Bildes.
In meinen Augen ist das ziemlich bescheuert spezifiziert, ich zumindest wollte noch nie ein Bild prozentual verkleinern, geschweige denn, vergrößern. Aber na gut.

Mein Problem ist, dass ich wirklich gern das "normale" Verhalten auch bei Bildern erzwingen würde. Ich weiß, dass es teilweise funktioniert. In der Vergangeheit hat es eigentlich immer geklappt, wenn das Originalbild sehr klein war. Dann haben die meisten Browser offenbar eine Ausnahem gemacht und das Bild auf den gesamten verfügbaren Platz gestreckt.
Es scheint dabei auch einen Unterschied zu machen, ob Höhe und Breite mit CSS oder HTML angegeben werden...

Nun habe ich ein ziemlich breites Bild, dass ich auf 100% der Breite seines Elternelementes strecken will. Bisher habe ich das allerdings weder mit CSS noch HTML hingekriegt.
Kennt jemand einen Ansatz, um das nur mit HTML und CSS zu lösen?

viel Spasz,
Apropos

[Deus Figendi]

Nun habe ich ein ziemlich breites Bild, dass ich auf 100% der Breite seines Elternelementes strecken will. Bisher habe ich das allerdings weder mit CSS noch HTML hingekriegt.
Kennt jemand einen Ansatz, um das nur mit HTML und CSS zu lösen?

Du musst das Bild (bzw. img-Element) zu einem Blockelement casten.

  
	<div style="width:50%; border:solid;">  
		<h1>Ueberschrift</h1>  
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
		<img src="http://src.selfhtml.org/logo.gif" style="display:block; width:100%"/>  
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  
	</div>  

Seltsamerweise wollte es bei meinen Versuchen nicht mit <p> klappen, aber was soll's ^^

In meinen Augen ist das ziemlich bescheuert spezifiziert, ich zumindest wollte noch nie ein Bild prozentual verkleinern, geschweige denn, vergrößern. Aber na gut.

Naja, ich habe diese Funktionalität schon oft benutzt, ich mag es :)

[Apropos]

Hi,

danke, für deine Antwort.
Meine Bilder waren allerdings schon als Block-Elemente formatiert.

Das Problem scheint mir inzwischen zu sein, dass der Container, in dem das Bild liegt, keine Breitenangabe besitzt. In dem Container sind zwei Bilder, eines soll dem Container seine Breite geben, das andere soll dann quasi auf die Breite des ersten Bildes gestaucht werden. Das scheint in der Form einfach nicht möglich zu sein.

Wenn ich dem Container eine Breite gebe, dann passt sich das prozentual formatierte Bild auch entsprechend an (und dabei ist es - zumindest im FF - egal, ob der Container ein P oder ein DIV ist).
Eine feste Breite würde ich aber gern vermeiden, weil die Bilder per PHP dynamisch eingesetzt werden sollen und ich nicht für jedes Bild die Breite erst auslesen will.

Hier noch einmal mein Quellcode:

p {  
	padding: 0;  
	margin: 5px 10px;  
	background: url('../gfx/image_back.png') top repeat-x;  
	float: left;  
	clear: none;  
	}  
  
img {  
	padding: 0;  
	display: block;  
	}  
  
img.shade {  
	height: 10px;  
	width: 100%;  
	}

...

<p>  
	<img src="../../symmorph/images/300020.jpg" alt="...">  
	<img class="shade" src="../gfx/image_shade.png" alt="">  
</p>

viel Spasz,
Apropos

[Apropos]

Hi,

ok, ich habe jetzt eine Lösung gefunden. Die Formatierung bleibt überwiegend wie oben. Allerdings positioniere ich zusätzlich das P relativ (ohne es dabei tatsächlich zu verschieben) und das Bild mit der Klasse "shade" positioniere ich absolut, sodass es am P ausgerichtet wird.

Dadurch richtet sich die Breite des zweiten Bildes tatsächlich nach der Breite, auf die das erste Bild das P streckt.

viel Spasz,
Apropos