Wie binde ich ein Bild Responsiv ein?

[Acta]

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?

[Spooky]

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)

<figure>
    <img src="..." />
</figure> 

folgendes CSS:

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> */
} 

border-box sizing deshalb, weil Contao bei den Bildabständen die Abstände als Padding für <figure> definiert.

[Acta]

<figure> <img src="tl_files/layout/hbackground.jpg"></figure>

Das Bild ist 700px; breit und 150 px hoch

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!

[Spooky]

Dir fehlt noch

figure {
    max-width:100%;
} 

denn ansonsten ist das figure mindestens so breit wie das Bild selbst, iirc.

[Acta]

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

[Spooky]

Dein #wrapper hat eine Fixe breite von 700px, dadurch kann sich auch nie etwas verkleinern.

[Acta]

oh mann so doof ^^

Danke gleich wieder rausgenommen