<main>
  <h1><span class="adapt">Adaptive</span> Vs <span class="fluid">Fluid</span> Design</h1>
  <figure class="adapt">
    <img src="http://lorempixel.com/600/400/" alt="photo" width="600" height="400">
    <figcaption>Adaptive image</figcaption>
  </figure>
  <figure class="fluid">
    <img src="http://lorempixel.com/600/400/" alt="photo" width="600" height="400">
    <figcaption>Fluid image</figcaption>
  </figure>
</main>

body {
  margin: 0;
  font-family: sans-serif;
  background: #222;
}

main {
  max-width: 50em;
  margin: 1em auto;
  background: #ddd;
  padding: 1em;
}

figure {
  text-align: center;
  margin: 10px;
}

h1 .adapt {
  color: blue;
  font-size: 2.5em;
}

h1 .fluid {
  color: red;
  font-size: calc( 0.8em + 5vw);
}

.fluid img { /* This is all you need for fluid images */
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 700px) {
  .adapt img {
    width: 400px;
    height: 266px;
  }
  h1 .adapt {
    font-size: 2em;
  }
}

@media screen and (max-width: 500px) {
  .adapt img {
    width: 300px;
    height: 200px;
  }
    h1 .adapt {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 400px) {
  .adapt img {
    width: 200px;
    height: 133px;
  }
    h1 .adapt {
    font-size: 1.4em;
  }
}