Image Sizing in HTML/CSS

If you are working on a small project and no one has the time to go in and resize all images to fit a specified area, I have a quick fix for you. This fix only works when the specified area is restricted by either height or width: img {width: 180px; height: *%; }. This will resize the image height to a relative value of the scaled width.

It works both ways:

img {height: 100px; width: *%;}
img {width: 100px; height: *%; }

This has only been tested in FireFox.  It may distort the image a little bit, but not nearly as much as it would if you used defined values for both width and height: img {width: 100px; height: 125px;}

Leave a Reply

Your email address will not be published. Required fields are marked *