Using max-width on an IMG (or any other element)

This refers to a question asked near the end of class today. It turns out max-width (for images) is covered in Robbins chapter 7, but in the latter part of the chapter that you were not assigned to read. I realize now that this was related to changes in the new edition of the book, because Robbins details how to use srcset and multiple versions of an image file, and I DO NOT want you to bother with all that, because in professional settings the multiple versions are created by automated software on the organization’s web server.

However, max-width is easy to use and very common, and it will likely help you in Assignment 4 (your second CSS assignment). It’s used for more than just images.

One of the easiest ways to use it is to make sure your image can automatically shrink in size if necessary.

img {
   max-width: 100%;

That would affect EVERY image on the page. Just add it to your CSS. If the image is inside a DIV or other element that changes in size on a smaller device, the image width will always be NO WIDER than the containing element. The image will not overflow its containing element.

Another common (and nice!) use of max-width is to constrain the width of an element holding text. On wide screens such as desktop computers, you don’t want the lines of paragraph text to be the whole width of that giant monitor. You want it to look more like a column. So you can apply max-width with rem or px to constrain the containing element, such as article. For example:

article {
   max-width: 700px;

Why 700px and not some other number? Well, maybe it’s because that width looks great with your images, depending on the width of the images — and whether they are inside the article or outside of it. In other words, there is no “magic number” of pixels or rems that is “best.” It depends on your content, your page design, your font size, etc.

Making sure your paragraph lines of text do not get too long is actually something that helps make your content easier to read. There’s something called optimal line length, and it affects the readability of your text.

Using max-width this way on an element containing text also allows it to shrink gracefully on smaller screens. If you use just width, it will not shrink. Note that this shrinking I’m referring to is completely separate from flex — not even using flex at all, max-width will allow elements to shrink.