Scale images in proportion to screen width

[masakudamatsu]

For responsive design in which the images scale up or down in proportion to the screen width, we need the following lines of code:

figure {
  overflow: hidden; /* Control the image size by the box size of the figure */
}

figure img {
  max-width: 100%; /* Control the image size by the box size of the figure */
  height: auto;
  display: block; /* Prevent images from aligning with other content like text */
}

See this CodeCademy lesson.