EFFECTS - CSS: Professional Techniques for Modern Layout - page 198

Heck, add an outline and you get what looks like a triple border
(see Figure 5-56).

img.threetone { background : #C40 ; padding : 5px ; border : 5px
solid #4C0 ; outline :
5px solid #40C ;}

Figure 5-56: A three-tone frame
with padding, border, and
outline.

CONSTRAINED IMAGES
Following on the theme of doing fun things with images, here's a way to keep them as big as
possible without busting out of their parent elements or forcing them to scale up past their
natural size. h is is a very handy ef ect, especially if you're going to be, say, including photo-
graphs or other possibly large images in your page and you want to make sure they don't
break the layout in skinny-browser situations.

img { max-width : 100% ;}

h at simple rule will keep your images no wider than the element that contains them, but in
cases where the parent is wider than the image, they'll stay their natural size. You can enhance
this to center the image within the parent, like so:

img max-width: 100%; display: block; margin: 0 auto; }

200

Figure 5-57 shows an example of the same image in three dif erent parents of dif ering widths:
two narrower than the image, and one wider. (h e edges of the parent elements are marked
with green borders.)

Figure 5-57: Three instances of the same image.