Wie binde ich ein Bild Responsiv ein?

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)

PHP-Code:

---

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


---

folgendes CSS:

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


---

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

Code:

---

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

---

Das Bild ist 700px; breit und 150 px hoch

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 noch

PHP-Code:

---

figure {
    max-width:100%;
} 


---

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

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