zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden responsive Bild mit max-width und height

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2016, 12:19
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard responsive Bild mit max-width und height

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2016, 15:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Aber genau das funktioniert nicht. Das Bild bleibt so groß wie es ist und skaliert nicht mit wenn ich das Browserfenster verkleinere.
Das liegt an dem float: left und float:right. Wenn ich die rausnehme funktioniert die Skalierung des Bildes.

Wobei es bei solchen div-Suppen schwierig ist herauszufinden, was da eigentlich schief läuft.

Und weiterhin fehlen viele CSS-Angaben in deinem Quellcodeschnipseln. Ohne die zu kennen macht die Fehlersuche wenig Sinn.

Gruss

MrMurphy

Geändert von MrMurphy (20.04.2016 um 15:48 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
Hintergrundbild repeat-y beginnend ab bestimmter höhe nightmind CSS 16 14.07.2012 13:37
Anfänger: Positionierung. xam CSS 3 19.05.2012 15:18
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 10:44
Css Neuling Bräuchte Hilfe wc3_monster CSS 2 03.12.2008 23:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:02 Uhr.