Enable CSS image scale with em!
Have you ever wished you could scale images along with text when you use your browser's text size options? Do even
use your browser's text size options? If you don't, I really can't blame you. Unfortunately today, too many
websites are authored using pixel units (px) when declaring font size. It's not hard to understand from a Web
Designers perspective. Images used for layouts and those included in content are almost always defined using
px units. It makes perfect sense to use the same unit of measure when assigning
font sizes, after all, who would want their layout to break just because a nearsighted visitor felt the need to
change the text size. Hah!—the nerve of some people!
It is no secret that the most common web
browser, is, Microsoft's Internet Explorer and, most of its users should be aware of
IE's text size options [view/text size/largest, larger, medium,
smaller & smallest]. Unfortunately, IE is unable to modify text
sizes that are defined using px units. For designers of fixed-sized table or div
layouts this is a good thing. A table cell or div that is just large enough to hold a set amount of text would blow
apart if larger text settings were available and selected, by site visitors. Users who need text zoom or scale
options don't have them available when designers exploit Internet Explorer's text sizing limitations in order to
protect precious layouts. Been there, done that.
The Mozilla/Netscape, Gecko based browsers do allow pixel text resizing; accessibility issues take precedence.
Unfortunately, the text zoom feature is limited to …well, text! Visitors can resize page text to suit, but
hey, tough luck regarding the too-small images. The Opera browser's
zoom and scale is the best solution. Images
and supporting graphics zoom and scale with other page elements and the layout remains intact. The question is: Can
CSS provide image scale and zoom functionality to the text resize
features of Internet Explorer, Mozilla and Netscape? The answer: Yes!
.content {/* style grouping for content divs */
margin: 2.5em 3%;
font: 1em Georgia, Palatino, Serif;
padding: 1.5em;
border: 8px groove #c0c0c0;
background: #f5f5f5;
}
h1.float-left {/* header element float */
float: left;
width: 9em;
margin: 0 0.2em 0 0;
background: #eee8aa;
border-right: 2px dotted #cd853f;
border-bottom: 2px dotted #cd853f;
}
p.top {/* after header margin adjustment */
margin-top: 0;
padding: 0.2em;
border-top: 3px dotted #696969;
background: #ffffe0;
}
Forget px, let em scale your image!
he drop cap here is created using an image. It does not use the standard
width and height attributes generally present within the HTML
image code block. A CSS class declaration defines the image, and
em units, not px, control its size. Change the text size settings of your browser to see the results. Guess what?
The battle of em versus px just got a little hotter.
<img class="b" src="../banners/bbneonua.gif" width="468" height="60" />
<img class="b b46860" src="../banners/bbneonua.gif" />
In the above example, two instances of the same banner graphic are displayed. The image has intrinsic width and
height values of 468 pixels by 60 pixels. The first instance of the banner uses conventional width & height
attributes as shown in the code example. The second instance of the banner uses the type class img.b46860 to
declare the width and height properties. In place of the expected px unit identifiers, image class .b46860
uses em values. Using em in place of px allows images styled in this manner to scale or zoom, according to the
selected "text size" of applicable browsers. For example, with Internet Explorer's default text size setting
Medium, the second banner displays a width equivalent to 468 pixels. At the Smallest text size setting, the
equivalent width is scales to approximately 234 pixels, while at the Largest text size setting, the banner zooms to
a width of 833 pixels.
img {/* border style for all images */
border: 0;
}
img.b {/* replacement for <br /> after images */
display: block; /* forces line break for content after */
}
img.b46860 {/* scalable em size class 468px/60px banners */
width: 29.25em; /* replaces 468px width */
height: 3.8em; /* replaces 60px height */
}
img.t {/* top margin control */
margin-top: 0.8em;
}
h2.float-right {/* header element float */
float: right;
width: 9em;/* em width variance by element*/
margin: 0 0 0 0.2em;
padding-left: 0.2em;
background: #90ee90;
border-left: 2px dotted #2e8b57;
border-bottom: 2px dotted #2e8b57;
}
p.default-margin {
/* margin-top: ; undeclared default margin */
padding: 0.4em;
border-top: 3px dotted #696969;
background: #f0fff0;
}
span.cap-g {/* Bad Moz! p:first-letter.class */
float: left;
font-size: 1.7em;
padding: 0 0.15em;
margin: 0 0.15em 0 0;
background: #90ee90;
border: 3px outset #2e8b57;
}
his ain't
your Mama's CSS! Cascading Style Sheets allow
tremendous design freedom. Leave your table-based mentality behind and think outside the box. - papabaer
2003
So how can
CSS scale an image? Well, technically it can't, that function
belongs to the user agent, if enabled. What CSS can do however,
is assign properties using units and values that are scalable. Perhaps a little background information would help.
See CSS Font Size Explained.
Did you follow the link and read about the issues of em versus px? If you did, you may recall this particular
sentence: The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it
is used. In plain talk, the em is "one inheritin' son-of-gun!" One "em" renders larger in a header than in an
accompanying paragraph where default or disparate values are indicated. Why? Because user agents typically display
text associated page elements in hierarchical manner.
So how does hierarchical display affect em-sized graphics? Are you ready for the possibilities? Pay very close
attention to the following examples. The
implications are enormous!
<h1><img class="g53" src="../assets/T60-90ee90.gif" /></h1>
<h2><img class="g53" src="../assets/T60-90ee90.gif" /></h2>
<h3><img class="g53" src="../assets/T60-90ee90.gif" /></h3>
<h4><img class="g53" src="../assets/T60-90ee90.gif" /></h4>
<p><img class="g53" src="../assets/T60-90ee90.gif" /></p> Do you see what I mean?
Same image, same applied style, hierarchical element placements, and very different renderings—all with the
same image and the same style! Talk about maximizing CSS! Pretty slick, huh? And perhaps a bit
confusing… But wait, before you get overly concerned, maybe even a little fearful, keep this in mind: once
you understand and recognize the hierarchical inheritance behavior, it makes for a powerful tool that you can use
to great advantage. Talk about maximizing style possibilities!—It's all there for you. Just be certain to
always consider any previous em assignments and potential inheritance considerations. Like the bad joke from the
CSS
Font Size Explained article, when dealing with em values, always remember to ask:
"Who's your Daddy?"
Em-Sized Images for Accessibilty Considerations
While there is little argument against the potential benefits of applying em-size to images as far as webmaster
convenience and code bloat is concerned, there is another, much greater benefit inherent in the technique.
Accessibility compliance can be enhanced in instances where the user's browser text-size settings can also scale
and zoom images. This might be especially useful for small to moderate sized images that may not be presented at an
optimal size for a particular visitor. Em-sized images will resize according to the user's preference, and
enhance the accessibility aspect of the em-sized image.
<img
class="b t" src="../assets/rez_120.jpg" width="120" height="120" /> 
<img class="b t" src="../assets/rez_200.jpg" width="200" height="200" />
<img class="b t g120"
src="../assets/rez_200.jpg" />
CSS Scale Image techniques: a matter of quality! Let me introduce you to
"Rez," the Big Baer Urban Alternative mascot! Seems I've forgotten my manners; I should have made
the introduction earlier. Now Rez might look angry, but don't worry—his bite is much worse than is bark
…er, growl. In the first of the three examples above, Rez makes his standard appearance, intrinsically, as a
120 pixel by 120 pixel graphic. Next, Rez returns a bit bolder, a little larger: he's now 200 pixels by 200 pixels.
The last instance of Rez, the BIG BAER mascot, has intrinsic width and height values of 200 pixels by 200 pixels,
but is scaled using image class .g120, to approximate 120 pixels by 120 pixels—he's not mind you, he
just looks that way. Rez will be back in all his angry glory as soon as some yokel goes screwin' around and
maximizes his browser's text size settings! This is done with little additional increase in file size and will help
retain good image quality when the image is zoomed to the largest,
browser text-size setting.
<img class="g53 b"
src="../assets/T60-90ee90.gif" />
<img class="g32 b"
src="../assets/T60-90ee90.gif" />
Why use CSS to add scale and zoom
potential to your images, photos and layout graphics? Well, it's all about a little thing called accessibility.
Liquid layouts built with scalable text and images, proper use of title and alt attributes, and good document
structure all written in validating code, go a long way towards opening up the Web to those who might have
difficulty otherwise. So, you thought you couldn't build a scalable, graphic intensive layout, right? Well, now you
know you can. Write well, code clean, design with intent! - papabaer 2003/04/06
img.g200 {/* scalable em size class 200 x 200 graphics */
width: 7.5em;
height: 7.5em;
}
img.dropcap-53 {/* scalable em 53 */
float: left; /* float that dropcap! */
width: 3.3em;
height: 3.3em;
}
img.g53 {/* scalable em 53 */
width: 3.3em;
height: 3.3em;
}
img.g32 {/* scalable em 32 */
width: 2em;
height: 2em;
}
blockquote.float-left {/* floats in content div */
float: left;
width: 13.5em; /* "em size" is element dependent */
padding: 0.5em;
margin: 0 0.5em 0 0;
color: #00008b;
background: #b0c4de;
border-right: 2px dotted #4169e1;
border-bottom: 2px dotted #4169e1;
}
blockquote span.cap-g {/* floats in blockquote */
float: left;
font-size: 1.7em;
padding: 0 0.15em;
margin: 0 0.15em -0.5em 0; /* negative bottom margin */
color: #b22222;
background: #90ee90;
border: 3px outset #2e8b57;
}
blockquote.float-left strong {
color: #000080;
}
blockquote.float-left em {
color: #800080;
}
p.after-blockquote {
padding: 0.4em;
border-top: 3px dotted #696969;
background: #e6e6fa;
}
Resources, tutorials and more: Well, it's time to cast aside the old "table layout mentality!"
Just remember: This ain't your Mama's CSS! Learn how to use the sandbag div and
create magazine style image layouts: [ Background Image Text Wrap
Tutorial | CSS
Float Html Tutorial ]
