Responsive Web Design - Images

Links

https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/ http://alistapart.com/article/responsive-images-in-practice

Bilder im Inhalt oder als Background

Normale Bilder mit dem img Tag konnten bis HTML5 nur per Skript ausgetauscht werden. Für Hintergrundbilder kann man mit Media Queries arbeiten.

Breite 100%, Höhe automatisch

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

Breite 100% aber nicht größer als das Bild

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

Hintergrundbild

komplett deckend ohne Verzerrung

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

Unterschiedliche Bilder für unterschiedliche Gerätegrößen

/* For devices smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
  background-size: cover;
  
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Mehrere Hintergrundbilder in einem Container Element

Seit CSS3 möglich

Hintergrundbild Oben und Unten zentriert (Oben fixiert, unten Scrollbar)

Code:
body {
background-image: url(Bild-Oben), url(Bild-Unten);
background-position: center top, center bottom;
background-attachment: fixed, scroll;
background-repeat: no-repeat;
}

HTML5 <picture> Tag

Stand 2016 wird sich eher das srcset Attribut durchsetzen als das picture Tag

Erlaubt (wie <video> und <audio> ) das Definieren von unterschiedlichen Bildquellen

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Weitere Techniken

srcset Attribut

picture tag

...