Bearbeiten von „Responsive Web Design - Images“

== Breite 100%, Höhe automatisch ==
<syntaxhighlight lang="css">
img {
    width: 100%;
    height: auto;
}
</syntaxhighlight>
== Breite 100% aber nicht größer als das Bild ==
<syntaxhighlight lang="css">
img {
    max-width: 100%;
    height: auto;
}
</syntaxhighlight>
== Hintergrundbild ==
=== komplett deckend ohne Verzerrung ===
<syntaxhighlight lang="css">
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
}
</syntaxhighlight>
=== Unterschiedliche Bilder für unterschiedliche Gerätegrößen ===
<syntaxhighlight lang="css">
/* 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'); 
  }
}
</syntaxhighlight>