Web Design with HTML and CSS

82

Adjusting the image size

Web Design with HTML and CSS Digital Classroom

1 Return to the web0501.jpg fi le and select Image > Image Size. The Image Size dialog

box appears, indicating that this fi le is 849 by 565 pixels.

The Image Size dialog box.

Remember that the top part of this dialog box is for on-screen resizing and the bottom

part is for resizing an image for printing. On-screen images cannot accommodate more

dots per inch in the same space; they occupy space on the monitor based on their

pixel count. This particular image would use about 90 percent of a browser window as

calculated from the pixel dimensions, not from the resolution. In the following steps, you

will only consider pixel dimensions.

2 After looking at the pixel information in the Image Size dialog box, click Cancel. Since

you must determine a specifi c width and height, you will use the Crop tool.

3 Click the Crop tool ( ) to select it in the Tools panel.

4 In the Options bar, type 225px in the Width text box and 150px in the Height text box.

Fixing the crop size.