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
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.