Moin,
ich habe eine Header Grafik die 700px breit und 150 Hoch ist.
Wie schaffe ich es, das sich die Grafik evenfalls an die Breite des zur Verfügung stehenden Fensters anpasst?
Moin,
ich habe eine Header Grafik die 700px breit und 150 Hoch ist.
Wie schaffe ich es, das sich die Grafik evenfalls an die Breite des zur Verfügung stehenden Fensters anpasst?
Wie sieht dein HTML code momentan dafür aus? Allgemein benutze ich bei einer regulären HTML Struktur für Bilder (wie sie auch bei den Content Elementen in Contao verwendet wird)folgendes CSS:PHP-Code:
<figure>
<img src="..." />
</figure>
border-box sizing deshalb, weil Contao bei den Bildabständen die Abstände als Padding für <figure> definiert.PHP-Code:
figure {
display:block;
max-width:100%;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
figure img {
width:auto;
height:auto;
max-width:100%;
display:block;
margin:0 auto; /* <-- nur wenn Bild zentriert sein soll im <figure> */
}
Das Bild ist 700px; breit und 150 px hochCode:<figure> <img src="tl_files/layout/hbackground.jpg"></figure>
Code:figure img { display: block; height: auto; max-width: 100%; width: auto; } img { height: auto; max-width: 100%; } img { border: 0 none; } body { color: #202020; font: 13px Arial,Helvetica,sans-serif; text-align: left; } body { font-size: 100.01%;
Das ist das gesamte CSS der auf das Bild Anwendung findet!
Dir fehlt nochdenn ansonsten ist das figure mindestens so breit wie das Bild selbst, iirc.PHP-Code:
figure {
max-width:100%;
}
das ganze figure hab ich auch drin stehen
nur malso der link... seite ist nur zum testen
http://acta-playground.de/liverpool/index.php/home.html
Dein #wrapper hat eine Fixe breite von 700px, dadurch kann sich auch nie etwas verkleinern.
oh mann so doof ^^
Danke gleich wieder rausgenommen
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen