XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Höhe von Bildern an Text-(DIV-)Höhe anpassen (http://xhtmlforum.de/showthread.php?t=67496)

Innocentus 14.05.2012 23:41

Höhe von Bildern an Text-(DIV-)Höhe anpassen
 
Ein DIV mit Text und mit voreingestellter maximaler Breite (max-width) wird links gefloatet, drei Bilder werden rechts davon untereinander gefloated.
Die Höhe des DIVs mit Text kann je nach Viewport-Breite stark variieren, das Layout ist flexibel.

HTML-Code:

[...]
<style type="text/css">
div#text {
float: left;
width: 70%;
max-width: 800px;
}


div#images {
float: right;
width: 30%;
}

div#images img {
width: auto;
height: 33.3%;
max-width: 200px;
max-height: 150px;
}
</style>
[...]
<div id="text">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test

<div style="clear:both"></div>
</div>

<div id="images">
<img alt="" src="/images/test1.png"></img><br />
<img alt="" src="/images/test2.png"></img><br />
<img alt="" src="/images/test3.png"></img>

<div style="clear:both"></div>
</div>
[...]

Nun soll sich die Höhe der Bilder gleichmäßig an die Höhe des links nebenstehenden DIVs anpassen.
Dies ist bei dem jetzigen Code leider nicht der Fall, die Bilder nehmen die voreingestellte, maximal mögliche Höhe (max-height) und die damit verbundene Breite (width: auto) ein.

background-size (CSS3) kann aus Kompatibilitätsgründen leider nicht verwendet werden.

Vielen Dank für eure Antworten im Voraus!
Mit freundlichen Grüßen
Inno


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019