Responsive Web Design - Images

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

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

HTML5 <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>