Can I use CSS to size an image

[AndyGroom]

Can CSS solve this problem:

If I am displaying a webpage that contains an image that is WIDER than the browser window, I'd like to scale that image down to fit on the screen.

If I am displaying a webpage that contains an image that is NOT WIDER than the browser window, I'd like to leave it alone.

So the end result would be the the whole page would fit the browser window width and not require a horizontal scrollbar.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[Vragabond]

No. CSS has no scripting abilities and you need scripting to determine the size of the browser window of the client. You would have to resort to javascript on this one.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[AndyGroom]

OK thanks.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[southbeach]

Well, if you wanted the image to be 100% the width of the window, you could

<img class='sizeIMG' src="images/myimage.gif" border="0" alt="" />

<style type="...">
sizeIMG {
 width: 100%;
}

</style>

What do you think? Would this do the trick?

Of course, you have the problem where if the image expands too large, it will be distorted.

There is also the case where if using a server side scripting tool (PHP, ASP, ...) you could conditionally set the properties of your image or define the style for the image dynamically.

Hope this helps!



--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[ChrisHunt]

Well, you could do this:

<img src="mypic.jpg" style="max-width: 400px;">

but there are several problems with this:
[ul]
[li][tt]max-width[/tt] doesn't work on IE6.[/li]
[li]Constraining the width in this way won't affect the height - so the image will appear "squashed"[/li]
[li]The user still has to download the full-size image, even though they're seeing a reduced version of it[/li]
[/ul]
You may be able to use Javascript to do what you ask for. Personally, I'd just make the images the right size to fit most screen sizes, and leave the user to scroll if he needs to.

You could also consider using a fixed size thumbnail image, and a javascript script like Lightbox to display the full-size image. I believe some of those scripts will re-size images to fit the window (though Lightbox itself doesn't).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[AndyGroom]

Unfortunately I need a solution that maintains the aspect ratio.

I only asked this question in case there was an easy solution that I wasn't aware of using styles, but thanks for your suggestions anyway.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[Ascalonian]

Yes you can scale the image and keep the aspect ratio. Say you have an image 234 x 91 and you want to reduce it down to 150px wide. Do the following in CSS:

img.resize { width: 150; height: auto;}

This will make the height auto adjust to the image and keep the aspect ratio.

Hope this is what you were looking for!

 

[peterv6]

Mikey,
I'm new to this stuff, but what you added looks just like what I need. If I'm using this for my page's background image, how would I code the html for this?

PETERV
Syracuse, NY &
Boston, MA

 

[peterv6]

Mikey,
Below I've listed my html & css code. Will your code:

img.resize { width: 150; height: auto;}

work with my stuff? I'm wondering, because I'm specifying the background image in my css, not in the html. As such, I'm a little confused as to how I would incorporate your code. If you would help me out, I'd really appreciate it!

From an earlier post I made:
The other problem involves the page's background image. Is there a way to make the background image expand & contract depending on how the user resizes the browser window? If so, I'd really appreciate it if someone would be willing to share that with me.

Webpage:
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<html><body class=body>
<hr WIDTH="100%" >
<center>
<font class=font>
Last updated Saturday, August 23, 2008 - 12:52 AM<br>
<b><i>my test footer</i></b> &copy; 2008<br>
<A class=menu2 href="

http://www.testpage.net/feedback.php">Contact

Webmaster</A>
</font>
</center>
<hr WIDTH="100%" >
</body></html>

Style sheet:
body {
background-image: url(../images/Ontario.png);
background-position: center center;
background-repeat: no-repeat;
}
font {
font-size: x-small;
color: yellow;
font-family: arial;
hr {
color: yellow;
height: 1px;
}


PETERV
Syracuse, NY &
Boston, MA

 

[BillyRayPreachersSon]

While the CSS 3 specs are enhancing the control you have over background images, right now in most browsers, you have little to no control over sizing them.

You can do so (as pointed out) with normal images, but not with background images.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

You could make this work by using an actual image instead of the background image and position that image absolutely. That way it would not interfere with the rest of the elements on the page. However, I think that's a bit of an overkill.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]