Bildgrößen
Pomplito
- css
Hallo,
ich verzweifle langsam ganz schön...
Folgendes funktioniert nicht (es wird kein Bild angezeigt)
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/bild1.gif" width="100%" height="100%">
</div>
Folgendes funktioniert zwar, aber es wird gleichmäßig skaliert und somit passt die Höhe nicht!
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/bild1.gif" width="100%">
</div>
Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?
Schönen Gruß
Pomplito
Hallo,
Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?
gib dem bild selber die 100% width und height:
<div>
<img src="bild.gif" alt="bla" width="100% height="100%">
</div>
Hallo,
Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?
gib dem bild selber die 100% width und height:
<div>
<img src="bild.gif" alt="bla" width="100% height="100%">
</div>
Wie ich oben schon geschrieben habe, funktioniert das nicht, sobald im <img>-Tag die height="100%"-Angabe vorkommt, wird kein Bild angezeigt!
Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!
hi,
Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!
das solltest du nur dann erwähnen, wenn es _ohne_ diesen umstand wie gewünscht funktioniert.
tut es das?
gruß,
wahsaga
Hi,
habe es gerade getestet und ja es funktioniert ohne.
Hier mal der gesamte Quellcode!
Folgendes funktioniert NICHT: (Die Bilder werden nicht angezeigt)
<html>
<body>
<!-- (linke Seite) Navigation -->
<div style="position:absolute;left:0px;top:0%;width:200px;height:100%;" scrolling="no">
<img src="bilder/logo_klein.gif" border="0" alt="Logo" title="Logo">
Text Nevigation
</div>
<!-- (rechte Seite) Inhalte -->
<div style="position:relative; margin:0px 0px 0px 200px;">
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/2.gif" width="100%" height="100%">
</div>
<div style="position:absolute; left:25%; top:0%; width:75%; height:14%; overflow:hidden;">
<img src="bilder/3.gif" width="100%" height="100%">
</div>
<div style="position:absolute;left:0%;top:0%;width:100%;height:100%;overflow:auto;">
Text Inhalte
</div>
</div>
</body>
</html>
Folgendes funktioniert: Bilder werden angezeigt! (Jedoch fehlt dann der Inhaltskontainer...)
<html>
<body>
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/2.gif" width="100%" height="100%">
</div>
<div style="position:absolute; left:25%; top:0%; width:75%; height:14%; overflow:hidden;">
<img src="bilder/3.gif" width="100%" height="100%">
</div>
<div style="position:absolute;left:0%;top:0%;width:100%;height:100%;overflow:auto;">
Text Inhalte
</div>
</body>
</html>
Hallo,
Wie ich oben schon geschrieben habe, funktioniert das nicht, sobald im <img>-Tag die height="100%"-Angabe vorkommt, wird kein Bild angezeigt!
Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!
Probier's mal mit:
<img src="xy.gif" style="width: 100%; height: auto; border: none;" alt="bla" title="bla">
Gruß Gunther
Hallo,
das geht leider auch nicht, vielleicht liegt es am äußeren <div>?
siehe auch hier: http://forum.de.selfhtml.org/?t=105135&m=649435
Vielen Dank
Pomplito
Hallo,
das geht leider auch nicht, vielleicht liegt es am äußeren <div>?
du musst dem relativ positionierten Div auch noch ein height:100% mitgeben - also:
<div style="height:100%; position:relative; margin:0px 0px 0px 200px;">
dann klappt's auch mit den Bildern!
Aber: Dein ganzes Konstrukt ist sehr wild und afaik führen absolut positionierte Blöcke in relativen immer zu Schwierigkeiten. Ich würde empfehlen, schau' dir (noch)mal einschlägige Seiten zu CSS Layouts an.
Gruß Gunther