-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

2x images are twice the width and twice the height images. The basic idea is to make the image twice the width and height that we actually need. We'll then add that image to our HTML. Then we'll use CSS to constrain the image to the actual size that it will be on the screen. The way I like to do this is the same way I like to handle flexible images in responsive design: I like to make sure that the images will have a containing element with a set width
and height
value. Then, I make sure the image itself has its max-width
set to 100%. Both these requirements are already in place. All my images typically have a container, and in CSS, and all my images have their max-width
set to 100%.
So let's get started with the raster images on the shark movies page. Right-click on the Jaws movie image and inspect this element:
We can see that these images on the shark movies page are 200 x 200 pixels. Our goal is to replace these with images that are 400 x 400...