Bilder mit fluider Breite per CSS im Internet-Explorer 8

IE8: Problem bei der Darstellung fluid breiter BilderWer mobile Websites entwickelt, der wird es schon festgestellt haben, dass umfließende Elemente (float), insbesondere Bilder unter einer gewissen Bildschirmbreite einfach keinen Sinn ergeben. Darüber hinaus ist es sogar sinnvoll, dass Bilder auf sehr schmalen Displays sich auf die volle Display-Breite anpassen. Wie das funktioniert, zeige ich hier…

Zuerst der HTML-Code:

<div id="box">
<img src="testbild_web.png" />
</div>

Wird nun per CSS die fluide Breiten-Eigenschaft auf das Bild selbst gesetzt, funktioniert die fluide Breitenanpassung (hier unter 200Pixel ) in den meisten aktuellen Browsern schon gut:

/* doesn't work in IE8 */
#box {
	display: block;
	height: auto;
	background: red;
	border: red 1px solid;
}
#box img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
	max-width: 200px;
}

Achtung: Dieser Code (oben) führt im IE8 unter Umständen zu einer verzerrten Darstellung des Bilders.

Um das Problem zu lösen, wird das Bild in einen Wrapper mit der id „box“ eingesetzt. Das könnte bei HTML5 auch das figure-Element sein. Und dieser Wrapper wird nun flexible in der Breite gesetzt. Das Bild hingegen bezieht sich in der Breite immer auf 100% zum Eltern-Element. Nun klappt die Flexible Darstellung auch im IE8.

/* works in IE8 */
#box {
	display: block;
	max-width: 200px;
	height: auto;
	background: green;
	border: green 1px solid;
}
#box img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

Dieser Wrapper wird nun auf eine maximale Breite eingestellt, die der Breite des Bildes entsprechen sollte. Das Bild erhält hingegen nur die Breite von 100%. Wird nun der Bildschirm schmaler als 200 Pixel, dann passt sich der Wrapper an, und entsprechend das Bild, und zwar ohne Verzerrung im IE8.

Hier nochmal das komplette Beispiel, wie es im Screenshot zu diesem Beitrag angezeigt wird, als HTML-Code:

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<title>IE8 fluid width images</title>
	<meta name="description" content="This is a site">
	<meta name="author" content="Michael Lambertz">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, mininum-scale=1.0, user-scalable=no">
	<style>
	/* doesn't work in IE8 */
		#box_bad {
			display: block;
			height: auto;
			background: red;
			border: red 1px solid;
		}
		#box_bad img {
			height: auto;
			margin-bottom: -7px;
			width: 100%;
			max-width: 200px;
		}
 
		/* works in IE8 */
		#box {
			display: block;
			max-width: 200px;
			height: auto;
			background: green;
			border: green 1px solid;
		}
		#box img {
			height: auto;
			margin-bottom: -7px;
			width: 100%;
		}
	</style>
</head>
<body>
<div id="box_bad">
<img src="testbild_web.png" />
</div>
<div id="box">
<img src="testbild_web.png" />
</div>
 </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *