Image scaling in liquid css layout
by Donna Arbogast
on
Oct 28, 2009 at 12:40:44 pm
Hello all. I'm looking for help on how to make my images scale to users screen size using a liquid css layout. I've searched the net, and I find lots of examples - but no one gives clear cut css coding directions.
I've also tried different options (and combinations of) like
width = 100% - didn't work
width = auto - didn't work
height = auto - don't know if it worked
max width = 1000 px - didn't work
Any advice you can give is much appreciated. Thank you!
Re: Image scaling in liquid css layout by Donna Arbogast on Oct 28, 2009 at 5:31:11 pm
If you drag the corner of the page in and out, you can see the image of the guy sitting by the rocks grow & shrink while staying in proportion to the page.
I've used liquid layouts before - often actually - but I've never been able to figure out how to make the image scale with the page.
Re: Image scaling in liquid css layout by Curtis Thompson on Oct 28, 2009 at 6:29:03 pm
hello...
ahh - ok. well - the beauty of the web is you have access to all his source code and you have a working example there...if you inspect that element, you'll see:
<div class="centerimg"><img src="images/home/billdan2.jpg" alt="Balancing Rocks at Crissy Field July 5, 2003" /></div>
and then you can see the related css bits in the style sheet:
Re: Image scaling in liquid css layout by Donna Arbogast on Oct 28, 2009 at 8:33:46 pm
Curtis,
1 - how did you find the css?
2- it didn't work. i copied his attributes except for his alignment & margins. the image still isn't scaling.
here is my html code for the image:
Here is my css class code:
.scaleImg {
width: 100%;
position: relative;
float: right;
}
Do you see something I missed?
If it would help you to look at my page I can upload it. It's just very preliminary & you know the whole artist "it's not ready to be seen yet!" ego thing. :)
Should probably mention, I tried entering a min. width & it stayed at that size. When I remove the min width, it blows out the side of the browser window & doesn't scale.
Re: Image scaling in liquid css layout by Fernando Mol on Oct 28, 2009 at 10:57:16 pm
Hi, Curtis and Donna
I really got caught on this post. I tried to simplify the CSS Curtis used to find out exactly which properties made possible the image to stretch. I ended with this:
#images {
width: 75%;
}
#images img {
width: 90%;
}
Note that I only tested it in Firefox.
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
