Check Out This CSS Trick

This is an image of Phoebe taken from the Cassini spacecraft and subsequently improved by me in Photoshop by adding stars. Phoebe is a chunk of ice and rock that orbits Saturn, but the reason Phoebe is here today is to show us how completely rad CSS is. This image is 1024px wide. I dropped the image tag in without declaring any width or height, and yet it doesn't expand beyond the borders of the design.

pic

CSS automatically limits the width of images to not exceed the width of the blog content area. Pretty sweet, eh? The max-width property at work, thankyouverymuch. Here's the code:

div.entry-content img{ max-width:578px; }

Unfortunately, in IE 6, this doesn't work, except that if you visit this page in IE 6, you'll notice that it \*does\* work, but only because I put a special CSS hack if for IE 6 that uses a proprietary IE feature to make it work. Bleh. In Safari, the vertical dimension of the image isn't scaled, so the image gets distorted, but that's better than nothing.

Comments:

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today