Tell a Friend About Our Cool Software
Chapter 2: Determining an Image's Pixel Size
You can determine the pixel dimensions of an image by opening it in any graphics program and using the Image Size command, or something similar, to display the size. Windows XP users have it even easier--simply locate the image file in Windows Explorer and point at the file name (do not click)--a small popup window will appear with information about the image including its pixel dimensions.
You can modify the display size of an image by using the width and height attributes in the <img>; tag. Here's an example:
<img src="logo.gif" width="60" height="40" />
This will tell the browser to display the image 60 pixels wide and 40 pixels high regardless of its actual size. The picture will be expanded or shrunk
as needed. By using the width and height attributes you can precisely size images to fit in your page layout.
However there are some important precautions:
The first is maintaining the image's aspect ratio, the ratio of its width to height. You can change this using the width and height attributes, but the result may look weird. If you don't believe me, here's proof. The following HTML code displays the same image twice on a Web page, the first time at its natural size of 600 x 200 pixels, so it is three times as wide as tall for an aspect ratio of 3:1. Then the image is displayed with the width attribute changed to 300 so the aspect ratio is now 1.5:1. As you can see in Figure 2-4, that second fish photo definitely looks ... well, fishy! The take-home message is that if you want to use the width and height attributes to change an image's size, change them both by the same factor to retain the original aspect ratio.
<body>
<img src="images/fish.jpg" width="600" height="200" />
<img src="images/fish.jpg" width="300" height="200" />
</body>
Figure 2-4. At its normal aspect ratio the photo looks fine (top), but with a distorted aspect ratio it definitely looks weird (bottom).
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
