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