Proportional Image Size

**Freejoy** · Apr 14, 2008 16:39

How do you make an image size proportional to the size of the viewers browser?

Is that done with HTML?

Thank you

**AutisticCuckoo** · Apr 14, 2008 22:58

You can specify the width and height attributes as percentage values, but since this is a presentational matter it really belongs to the realm of CSS.

Browsers aren't very good at resizing images, especially not when enlarging them. I'd recommend setting a maximum width that equals the natural width of the image. This doesn't work in IE6 or older, though.

Code HTML4Strict:

<img src="/path/to/image.jpg" alt="(text equivalent)" class="medium">

Code CSS:

img.medium {
  width:50&#37;;
  max-width:400px;
  height:auto;
}

**Freejoy** · Apr 14, 2008 23:32

7,000+ posts!

You gotta know your stuff! (smile)

So will css work with a lot more browsers? Maybe like most of them?

Thanks

**AutisticCuckoo** · Apr 15, 2008 01:24

I'm a taciturn newbie compared to some of the veterans here who have racked up over 20,000 posts.

The CSS above should work in Opera, Firefox (and other Gecko browsers), IE7, Safari and Konqueror (I think). Probably others, too. You may want to hide it from IE6, because I think the height:auto doesn't work there so it will muck up the aspect ratio. You can hide it from IE6 by using the following selector:

Code CSS:

html>body img.medium {

**spikeZ** · Apr 15, 2008 01:33

Originally Posted by Freejoy

7,000+ posts!

You gotta know your stuff! (smile)

I would probably go off the fact that he WROTE THE BOOK!

**AutisticCuckoo** · Apr 15, 2008 01:50

Only half of it, Spike. The useful bits were written by Paul.

**Freejoy** · Apr 15, 2008 13:10

AutisticCuckoo,

I read your solution and was trying to figure out where and how exactly to put it into the code. And while looking around found this:

******************

<style type="text/css">
#img3 IMG {width:100%; max-width:199px;}
</style>

<body>
<p id="img3"><img src="images_jpg\happy.jpg" alt="happy person"></p>
</body>

*******************

It works like a charm but the only thing is if there's two images beside each other one will drop down below the other one. They won't stay beside each other.

So, I was wondering if/how to make a "boundary" ...like a line below the images that says "NOTHING goes beyond this line." Something like that. Is that possible to do? Even though the page is fluid? It just seems like if the image has a place to go...it goes, but if there was nowhere to go it would have to sit there in go "proportional."

Thank you

**web67** · Apr 15, 2008 14:22

u do it by using the % tags for the image height and idth instead of static ones

**Freejoy** · Apr 15, 2008 14:37

How do you mean? Do you have an example I could try?

**web67** · Apr 15, 2008 15:15

simple use image width=some percent and height=some %

add it to css or simply img tag, why u need example for this!

**Freejoy** · Apr 15, 2008 20:32

Because I've never done that before.

If I get one character out of place the whole thing doesn't work. I have no idea where to put the % signs. I'm working with a very basic template piecing things together as I go. Trying to get a "framework" together or something to design within.

Like right now I've been looking everywhere for how to start a text paragraph at the top, right, side of a picture. I read it somewhere but I haven't been able to locate it.

I'm all over the place!

**AutisticCuckoo** · Apr 15, 2008 22:57

Originally Posted by Freejoy

It works like a charm but the only thing is if there's two images beside each other one will drop down below the other one. They won't stay beside each other.

If the width is 100% it will cover all available horizontal space. You can't have two things with 100% width side by side.

If you want two images side by side, you should set the width to less than 50%. Images are inline elements, which means whitespace in the HTML markup between the <img> tags will appear as a single space between the images. Even if you don't have any space between the tags, you should still set the widths just below 50% (like 49.9%) to avoid issues with rounding errors.

(BTW, you should use a '/' in the image URI, not a '\', even if you're using Windows.)

Originally Posted by Freejoy

So, I was wondering if/how to make a "boundary" ...like a line below the images that says "NOTHING goes beyond this line." Something like that. Is that possible to do? Even though the page is fluid? It just seems like if the image has a place to go...it goes, but if there was nowhere to go it would have to sit there in go "proportional."

I'm afraid I don't understand what you mean here. This will give you a line below the images if they both reside in the same paragraph:

Code CSS:

#img3 {border-bottom:1px solid #000}

User Tag List

Thread: Proportional Image Size

Thread Tools

Display

Proportional Image Size

Bookmarks

Bookmarks

Posting Permissions