Hallo ins Forum,
ich habe folgenden Quellcode aus einem CMS
HTML-Code:
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="page clearfix">
<div>
<div id="c84">
<div class="ce-textpic ce-right ce-intext">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-row">
<div class="ce-column">
<div class="ce-media">
<img title="Testbild" alt="Testbild" src="http://placehold.it/700x316" width="700" height="316" />
</div>
</div>
</div>
</div>
<div class="ce-bodytext">
<p>Dieser Text steht links vom Bild</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Auf die Verschachteltung mit den <div> und auf die Benennung der Klassen nehme ich keinen Einfluß. Das CSS was hier für Text links und Bild rechts zuständig ist sieht (ebenfalls aus dem CMS) so aus.
Code:
.ce-textpic, .ce-gallery, .ce-row { overflow: hidden; }
.ce-left .ce-gallery, .ce-column { float: left; }
.ce-right .ce-gallery { float: right; }
.ce-gallery img { display: block; }
.ce-intext.ce-right .ce-gallery { margin-bottom: 10px; }
.ce-intext.ce-right .ce-gallery { margin-left: 10px; }
.ce-intext.ce-left .ce-gallery { margin-right: 10px; }
.ce-below .ce-gallery { margin-top: 10px; }
.ce-column { margin-right: 10px; }
.ce-column:last-child { margin-right: 0; }
.ce-row { margin-bottom: 10px; }
.ce-row:last-child { margin-bottom: 0; }
In meinem zusätzlichen CSS steht folgendes, um die Bilder responsive zu machen.
Code:
img {
max-width:100%;
height:auto; }
Aber genau das funktioniert nicht. Das Bild bleibt so groß wie es ist und skaliert nicht mit wenn ich das Browserfenster verkleinere.
Danke für n Tipp und Gruß
mimii