- Controlling size of images in CSS
- Aligning images in CSS
- Adding background images
Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.
You can also achieve several interesting effects using background images. In this chapter you will learn how to:
- Specify the size and alignment of an image using
- Add background images to boxes
- Create image rollovers in CSS
CONTROLLING SIZES OF IMAGES IN CSS
You can control the size of an image using the width and height properties in CSS, just like you can for any other box.
Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.
You might think that your site is likely to have images of all different sizes, but a lot of sites use the same sized image across many of their pages.
For example, an e-commerce site tends to show product photos at the same size. Or, if your site is designed on a grid, then you might have a selection of image sizes that are commonly used on all pages, such as:
Small portrait: 220 × 360
Small landscape: 330 × 210
Feature photo: 620 × 400
Whenever you use consistently sized images across a site, you can ...