Front-End Web Development: The Big Nerd Ranch Guide

Making Images Fit the Window

Following the atomic styling pattern, the images are next in line for styling. They are so large that they are cut off unless the browser window is also large. Add a styling rule for .thumbnail-image in styles.css to make the thumbnails fit in the window:

...
a {
  text-decoration: none;
}

.thumbnail-image {
  width: 100%;
}

.thumbnail-title {
  ...
}

You set the width to 100%, which constrains it to the width of its container. This means that as you widen the browser window, the images get proportionally larger. Check it out: Save styles.css, switch to your browser, and make your browser window larger and smaller. The images grow and shrink along with the browser window, always keeping their proportions. ...