FORUMS: list search recent posts

Image scaling in liquid css layout

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Donna Arbogast
Image scaling in liquid css layout
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!




Return to posts index

Curtis Thompson
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 4:07:38 pm

hello...

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

sitruc


Return to posts index

Donna Arbogast
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 5:07:39 pm

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: http://www.rock-on-rock-on.com/

My page isn't anywhere near complete yet. :)


Return to posts index


Curtis Thompson
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 5:21:33 pm

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


Return to posts index

Donna Arbogast
Re: Image scaling in liquid css layout
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.


Return to posts index

Curtis Thompson
Re: Image scaling in liquid css layout
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:

http://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


Return to posts index


Donna Arbogast
Re: Image scaling in liquid css layout
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.


Return to posts index

Donna Arbogast
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 8:36:39 pm

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

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


Return to posts index

cowcowcowcowcow
Curtis Thompson
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 9:02:36 pm

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:

http://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


Return to posts index


Jeffry Helms
Re: Image scaling in liquid css layout
on Sep 4, 2013 at 12:35:27 pm

Thanx for your help--many blessings!


Return to posts index

Fernando Mol
Re: Image scaling in liquid css layout
on Oct 28, 2009 at 10:50:56 pm

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.


Return to posts index

Fernando Mol
Re: Image scaling in liquid css layout
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.


Return to posts index


Donna Arbogast
Re: Image scaling in liquid css layout
on Oct 29, 2009 at 5:32:20 pm

Wonderful!! I have no idea how it works, but it does. :)

Thank you very much guys.
Donna


Return to posts index

Carmen Shah
Re: Image scaling in liquid css layout
on Nov 8, 2009 at 11:12:53 pm

Try to use min-height and width this should solve your problem

[url="http://www.adaptivedatasystems.com/cms/"]Best Content Management System[/url]


Return to posts index

Kelly Johnson
Re: Image scaling in liquid css layout
on Nov 10, 2009 at 5:31:26 pm

The latest edition of Web Designer magazine (look in barnes and nobel) has a tutorial on this specific technique.



Return to posts index


Donna Arbogast
Re: Image scaling in liquid css layout
on Nov 12, 2009 at 1:10:30 pm

Good to know! Thank you very much.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]