CSS image widths

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

CSS image widths

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> CSS image widths

Page: [1]


TexasWebDevelopers Posts: 722 Joined: 2/22/2002 From: Dallas, TX Status: offline	CSS image widths - 10/22/2008 9:57:26 I came across an interesting site yesterday: http://www.rock-on-rock-on.com/ Resize the browser and the images resize nicely with CSS. Growing and shrinking images using CSS widths is very interesting (and not often used). I'm not sure why this technique isn't used more often as it is very powerful. As long as the "largest" image is clear then reducing the size has a nice effect. The generic CSS would look something like this: div {width:90%;} div img {width:90%;} There are some caveats: IE6 does not inherit the width of a parent with an undeclared width so be careful with percentages on child elements. Also, in IE, four images each at 25% may wrap to a second line because of rounding errors--so set the widths at 24.9% to adjust. Any thoughts on this technique? _____________________________ Follow us on TWITTER


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS image widths - 10/22/2008 10:35:39 I've used this technique before but it's not without it's problems. The image has to be quite large and thus takes up server space and slows down download speeds. Also at smaller screen widths the image quality is reduced. Basically it does work - but you have to be really careful about the image you choose. Generally, unless the image is informational, I tend to prefer achieving scalable images as background images within a scalable box so the image is cropped proportionally. Obviously this is no good if the image is informational rather than just for pretty. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to TexasWebDevelopers)