Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

webginga · 26.10.2013

Hallo,
gibt es eine einfache Möglichkeit, dass sich Bilder auf der Webseite genauso flexibel verändern in der Größe, wie die Größen bei einem flexiblen Weblayout? Bisher habe ich bei Webseiten in denen es hauptsächlich um Bilder geht, immer mit px Angaben gearbeitet. Nun würde ich gerne mal ein flexibles Layout für eine Webseite erstellen. Allerdings müßten sich da auch die Bildgrößen mitverändern.
LG
webginga

cythux · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

Das geht mittels Css, jedoch in %-Werten

Code:

img {
	max-width: 100%;
	height: auto;
}

webginga · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

hallo cythux,

danke für die schnelle Antwort. Seht dann im HTML code zusätzlich eine Angabe für width und height? Noch eine dumme Frage, das Bild wird in der maximalen Größe also den 100% hochgeladen?
Also wäre es möglich einen Wrapper mit beispielsweise max-width: 1200px; und min-width: 800px; zu definieren. Darin befinden sich der header über die jeweilige Breite des wrappers, darunter 2 Spalten mit %Angaben und darin im Bereich der 2. Spalte die sich angleichenden Bilder die bei 100% zur max-width: des Wrappers passen?
Darunter dann den Footer wieder in Wrapperbreite.
LG
Webginga

cythux · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

Das geht ebenfalls mittels %-Werten

nur dann musst du
background-image nutzen

PHP:

<img src="Bildurl/bild.png">

um das in verschieden Display Grössen zu nutzen, musst du schon Mediaqueries nutzen

webginga · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

hallo cythux,

Ich baue und teste noch. Es funktioniert, wenn das Bild in einem begrenzenden Behälter steckt.

LG Webginga

Duddle · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

http://bradfrost.github.io/this-is-responsive/patterns.html
Scroll zu "Images" und schau dir die Beispiele an.

Duddle

patrick_l · 26.10.2013

AW: Wie kann ich Bilder für ein flexibles Weblayout variabel in der Größe machen

webginga schrieb:
Seht dann im HTML code zusätzlich eine Angabe für width und height?

Inhalte sowie dessen Struktur von der Formatierung getrennt halten. Dazu alle Formatierung in einem externen Stylesheet (CSS) definieren und dieses im Kopfbereich (<head>) einbinden.

Externes Stylesheet einbinden:

HTML:

<!-- HTML5 -->
<link rel="stylesheet" href="/pfad/style.css">
<!-- XHTML -->
<link rel="stylesheet" type="text/css" href="/pfad/style.css">

Im CSS unter anderem Grafiken und Bilder die fürs Layout benötigt werden, als background-image einfügen. Alle anderen Elemente einzelnen selektieren und entsprechend anpassen (stylen).

webginga schrieb:
Noch eine dumme Frage, das Bild wird in der maximalen Größe also den 100% hochgeladen?

Bilder und Grafiken fürs Web optimiert (Dateigröße und Format) hochladen. Die Grafik (das Bild) sollte in der fürs Layout höchsten benötigen Größe hochgeladen werden, und anschließend mit CSS (mit Media Queries - wie cythux schon schrieb) runter skaliert werden.

Liebe Grüße, Patrick