Hallo SELFler,
ich habe ein Problem mit der Verkleinerung von Bildern.
Ich möchte das Bilder (hochkant und senkrecht) in einem Container sich an die breite anpassen und in der Höhe auf 75% begrenzen (dies brauche ich für ein Drucklayout, da sonnst das Foto auf der zweiten Seite landet).
Die Begrenzung der Breite klappt einwandfrei, aber die Höhe wird von allen Browsern, bis auf merkwürdiger weise dem IE7, nicht nach meinem Wunsch angezeigt wird.
Zur Klärung Bild a.jpg hat das Format 3:4 und b.jpg 4:3.
Meine Testseite:
[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.ausgabe {
width:300px;
height:400px;
background-color:#C9C;
float:left;
}
img {
max-width:100%;
max-height:75%;
}
</style>
</head>
<body>
<div class="ausgabe">
<div class="h b"><img src="a.jpg" /></div>
</div>
<div class="ausgabe">
<div class="q b"><img src="b.jpg" /></div>
</div>
</body>
</html>
[/code]
Ich hoffe ihr könnt mir helfen :-)
Gruß,
Rekire