Responsive Web Design - Images

Links

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

Plazierung von responsive Images

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

Standardfall für Inhaltsbilder

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

Hier kommt cover zum Einsatz

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

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;
}

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

Hierzu gibt es unterschiedliche Techniken mit unterschiedlichen Vor und Nachteilen. Hier einige Aspekte:

• Bilder werden vom Browser z.T. vor den Styles, aber nach dem HTML geladen. Das bedeutet der Browser weiß manchmal nicht welche Größe er im Layout benötigt (nur den Viewport kennt er).
• Media Queries beziehen sich in der Regel auf den Viewport
• Bei kleinen Screens ist es manchmal besser einen Ausschnitt zu zeigen. Gut wäre ein Focalpoint (z.T. gibt es hier JavaScripte)

Links

https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/

Media Query Beispiel

Bezogen auf Viewport

/* 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'); 
  }
}

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

data attribut

picturefill...