Responsive Images

When working on a site, you must remember that not all screen sizes are the same. As a screen gets smaller or larger, you want your images to be able to self-adjust as well. These are called responsive images and they will automatically adjust to fit the size of the screen.

Steps to a Responsive Image:

Example HTML: <img src="nature.jpg" alt="Nature" class="responsive">

1. Scale both up and down

• .responsive{width: 100%; height: auto;}
  • This works best for .svgs because you will not lose any picture quality

2. Scale down but never scale larger than the image's original size

• .responsive{max-width: 100%; height: auto;}
  • This works best with .jpgs and .pngs because as you scale the image up, there will be a point where you begin to lose picture quality

3. Scale down but never scale larger than a set value (often pixels)

• .responsive{width: 100%; max-width: 400px; height: auto;}
  • This is the option that I use the most, especially if there is an image in a header/ nav bar.

W3Schools has a tutorial that I used to write this issue.