nicht angemeldet
Bilder werde falsch Verkleinert
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
-
Hi,
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.
oi, wieder etwas über den IE 7 gelernt.
img {
max-width:100%;
max-height:75%;
}Ja, ab Version 7 kennt der IE diese Eigenschaften. Ich hätte vermutet, dass er sie zumindest ungefähr richtig anwendet.
<div class="h b"><img src="a.jpg" /></div>
Wie hoch ist denn dieses <div>?
Btw: ERROR: Required attribute "alt" missing.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
hi Cheatah,
<div class="h b"><img src="a.jpg" /></div>
Wie hoch ist denn dieses <div>?
Habe ich nicht festgelegt, mal gucken ob es daran liegt.
Btw: ERROR: Required attribute "alt" missing.
Stimmt, habe ich vergessen. Zur demonstration reicht es aber :-)
-
Hi,
Wie hoch ist denn dieses <div>?
Habe ich nicht festgelegt,also richtet sich dessen Größe nach dem Inhalt, der seine Größe wiederum relativ zu diesem <div> festlegt. Wie wird dieses Dilemma gelöst?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi
Wie hoch ist denn dieses <div>?
Habe ich nicht festgelegt,also richtet sich dessen Größe nach dem Inhalt, der seine Größe wiederum relativ zu diesem <div> festlegt. Wie wird dieses Dilemma gelöst?
Ich weiß jetzt nicht, was du meinst aber ohne diese überflüssigen div-tags klappt es noch immer nicht.
<div class="ausgabe">
<img src="a.jpg" />
</div>
<div class="ausgabe">
<img src="b.jpg" />
</div>
-
-
-
-
Hello,
ich könnte es mir besser vorstellen, wenn du die Testseite mal ins Netz stellen könntest - generell würde ich mich mal bei der overflow-Eigenschaft des umgebenden divs umschauen.
MfG
Rouven--
-------------------
There's no such thing as a free lunch -- Milton Friedman-
Ich möchte ja das die Bilder komplett sichtbar sind, aber halt verkleinert.
-
Hello,
Ich möchte ja das die Bilder komplett sichtbar sind, aber halt verkleinert.
und wie dann verkleinert? Asymmetrisch skaliert oder wie?
MfG
Rouven--
-------------------
Death is nature's way of telling you to slow down.-
hi,
Ich möchte ja das die Bilder komplett sichtbar sind, aber halt verkleinert.
und wie dann verkleinert? Asymmetrisch skaliert oder wie?So das das Seitenverhälltnis erhalten bleibt.
-
-
-
-
Hat jemand noch eine Idee?