CSS and Images (Width, Max-Width, and Overflow)

Here are 10 experiments in scaling and/or cutting off images (hiding the overflow) using CSS. The first 7 use a wide image of 1500 pixels x 250 pixels, the next two use an image that is 200 x 150 pixels in dimensions, and the last one uses the large 1500px image again. Each example styles the images using different CSS techniques. Each image (and this text) is contained within a container div tag set to 50% of the screen size. Try changing your window size within different browsers and check out the effects on the different images.

1. The image, without any styles applied. It busts out of the containing box.
CSS Style: #img-1 {}

 

2. The image set to 100% width, without a height definition.
CSS Style: #img-2 img {width:100%;}

 

3. Set to 100% width with the height set to 250 pixels.
CSS Style: #img-3 img {width:100%; height:250px;}

 

4. The image with the overflow hidden (doesn't work in IE 6).
CSS Style: #img-4 {overflow:hidden;}

 

5. The image witht he overflow hidden, and the float set to right (doesn't work in IE6).
CSS Style: #img-5 {overflow:hidden;} #img-5 img {float:right;}

 

6. The image defined as a background image and centered. Works in IE6 even.
CSS Style: #img-6 {background:url(turtle-wide.jpg) no-repeat center center; height:250px}

 

7. The image defined as a horizontally centered background image; with the height set to 100 pixels and bottom aligned.
CSS Style: #img-7 {background:url(turtle-wide.jpg) no-repeat center bottom; height:100px}

 

8. A 200 pixel image set to 100% width; the image distorts when it scales beyond its original size of 200 px.
CSS Style: #img-8 img {width:100%;}

 

9. A 200 pixel image set to a max-width of 100%. This image will only scale below 200 pixels (if the browser window is small enough) but won't scale above its native size of 200 pixels if the browser window is large. This max-width parameter doesn't work in IE 6.
CSS Style: #img-9 img {max-width:100%;}

10. A 1500 pixel image set to a max-width of 100%. This image will scale if its container is less that 1500 pixels in size, but if the container is greater than 1500 pixels, the image will max at its native (100%) scale of 1500px.
CSS Style: #img-10 img {max-width:100%;}