ptg16476052Other Neat Tricks with Images 2199
Other Neat Tricks with Images
Now that you’ve learned about inline images, images as links, and how to wrap text
around images, you know what most people do with images on web pages. But you can
play with a few newer tricks, too.
Image Dimensions and Scaling
Two attributes of the tag, height and width, specify the height and width of the
image in pixels or as a percentage.
If the values for width and height are different from the actual width and height of the
image, your browser will resize the image to fit those dimensions.
Here’s an example tag that uses the height and width attributes:
Although the width and height attributes are still part of HTML5, best practices recom-
mend that you avoid using them. Instead, you should size your images with CSS. This
lets your images be responsive. You will learn more about this in Lesson 16, “Using
Responsive Web Design.”
To specify the height and width using CSS, use the height and width properties:
If you leave out either the height or the width, the browser will calculate that value based
on the value you provide for the other aspect. If you have an image that’s 100 pixels
by 100 pixels and you specify a height (using the attribute or CSS) of 200 pixels, the
browser will automatically scale the width to 200 pixels, as well, preserving the original
aspect ratio of the image. To change the aspect ratio of an image, you must specify both
the height and the width.
As you’ve seen in this lesson, browsers can figure out the dimensions of images on their
own. There are two reasons to specify the dimensions. The first is to alter them—to
resize the image in the browser so it better fits on the page. This is how images are made
responsive. You should create your images exactly as large as the largest device will be
viewing them. Then use a graphics program to make the file size as small as possible.
Then you can use CSS to resize the image down in smaller devices.