Responsive Images

Tips for working with Images

  • Start with largest version of your image and use css styling to resize to desired size (more on this next class)

  • Use max-width: 100% to prevent images from extending wider than its container


/* Apply to all images */

img {
  max-width: 100%;
}


Example: Fixing the image container issue

JS Bin on jsbin.com

In the example above, the default size of the image extends beyond the image container. An easy fix is to apply max-width: 100% globally on your stylesheet.

Uncomment the currently commented out style and observe the results.