Image scaling in liquid css layout

[Curtis Thompson]

hello…

w/o the context of the page it’ll be tough to offer a solution – do you have an example?

sitruc

[Donna Arbogast]

Of the page I’m building or just what I’m looking for in general?

This is an example of what I’m looking for: https://www.rock-on-rock-on.com/

My page isn’t anywhere near complete yet. 🙂

[Curtis Thompson]

hello…

hmm – sorry. i’m not seeing what you’re trying to do there. what on that page is the thing that you are trying to replicate?

sitruc

[Donna Arbogast]

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.

[Curtis Thompson]

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:

https://www.rock-on-rock-on.com/styles/index1style.css

i’d try a real basic page using that html/css combo and you’ll probably get it…

hope that helps!

sitruc

[Donna Arbogast]

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.

[Donna Arbogast]

Well that’s weird. the html didn’t show up. Try something different

div class=”scaleImg” img src=”images/prettygirl.jpg”/ /div

[Curtis Thompson]

hello…

[Donna Arbogast] “1 – how did you find the css? “

the link to the file is in the source of the page…

here’s a simple example that i made which uses all his css and his image:

https://sitruc.com/cow/img_scale/

all the css needed is in the page so if you view the source you’ll see it there…

hope that helps!

sitruc

[Fernando Mol]

When you paste code be sure to select it and press the CODE button on the post window (in the upper part) that way the code will show.

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.

[Fernando Mol]

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.