Getting Control of Images

Weirdly? Images are "inline" elements by default. So it iss a good idea to force them to be "block-level" in most cases. CSS lets you adjust the size of an image easily by determining its width. Once you have "set" a specific width you can tell the browser to center it with margin:auto. The image below is using CSS to mimic an old polaroid.

Often you will have a photo that you want to "Crop" or make it fit a specific size. CSS3 provides a neat and easy object-fit:cover property that gives you detailed control of positioning images and other embedded media within their box. SEE: object-fit in the Css-Tricks Almanac

Finally, Images can also be used as "decorative" design touches with CSS and used as the background of any element. SEE: * background-image on Codrops CSS Reference * Having Fun With Tomorrow’s CSS: Backdrop Filters