image grows outside a box

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Abs - 26 Nov 2004 17:05 GMT

Hi!

I have an image inside a DIV box with its dimensions specified. The
problem is that I don't know the dimensions of the image beforehand,
therefore the image grows outside the box if it's bigger than the box.
Is there a way to force the image to resize itself automatically to fit
the box with CSS ?

Thanks in advance

Reply to this Message

Neal - 26 Nov 2004 17:08 GMT

> Hi!
>
[quoted text clipped - 3 lines]
> Is there a way to force the image to resize itself automatically to fit
> the box with CSS ?

Best solution is to actually resize the image with server-side script.
Scaling images in the browser does not usually work out very well.

Reply to this Message

Lauri Raittila - 26 Nov 2004 17:14 GMT

> Hi!
>
> I have an image inside a DIV box with its dimensions specified. The
> problem is that I don't know the dimensions of the image beforehand,

Well, you do know. Unless you are getting it from another site?

> therefore the image grows outside the box if it's bigger than the box.

Why did you set div boxes dimensions then?

> Is there a way to force the image to resize itself automatically to fit
> the box with CSS ?

No. What is your real problem? URL?

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Reply to this Message

jake - 26 Nov 2004 20:31 GMT

In message <30p62hF31uoeuU1@uni-berlin.de>, Abs <abs2@yahoo.com> writes

>Hi!
>
[quoted text clipped - 5 lines]
>
>Thanks in advance

If you have set the size (width, height) of the containing div, then set
the width of the image to 100%. The image will then be resized by the
browser to fill the container.

However, the results of image resizing only looks acceptable if the
image is resized downwards. i.e. not presented in a container bigger
than the physical size of the image.

regards.

Signature

Jake

Reply to this Message

Abs - 27 Nov 2004 08:08 GMT

> In message <30p62hF31uoeuU1@uni-berlin.de>, Abs <abs2@yahoo.com> writes
>
[quoted text clipped - 17 lines]
>
> regards.

Ok, thank you very much, this made the trick!

Reply to this Message

Stan Brown - 26 Nov 2004 21:41 GMT

"Abs" wrote in comp.infosystems.www.authoring.stylesheets:

> I have an image inside a DIV box with its dimensions specified. The
>problem is that I don't know the dimensions of the image beforehand,
>therefore the image grows outside the box if it's bigger than the box.
>Is there a way to force the image to resize itself automatically to fit
>the box with CSS ?

Why not resize the box to fit the image? Why make people download a
big image only to see a small one?

Signature

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/

Reply to this Message

Abs - 26 Nov 2004 23:34 GMT

> "Abs" wrote in comp.infosystems.www.authoring.stylesheets:
>
[quoted text clipped - 6 lines]
> Why not resize the box to fit the image? Why make people download a
> big image only to see a small one?

Because I need the page (and the images) to be proportional to the
screen resolution, that's why use percent units to set the box
dimensions and position. Anyways, it seems it cannot be done, but I
still don't understand this css behaviour, not resizing the content to
fit the dimensions of its enclosing box.

Reply to this Message

mscir - 27 Nov 2004 01:56 GMT

>> "Abs" wrote in comp.infosystems.www.authoring.stylesheets:
>>
[quoted text clipped - 12 lines]
> still don't understand this css behaviour, not resizing the content to
> fit the dimensions of its enclosing box.

How about this approach? In the image onload event, the image is resized
to fit into the div (hardcoded to 300px square for this example) using
javascript. The image is made as large as possible while preserving it's
width to height ratio. Requires javascript being enabled, else image
stays its original size.

<script type="text/javascript">
function resizeimage(imgname){
var d1=document.images[imgname];
//get current image size and w/h ratio
var currentw=d1.width;
var currenth=d1.height;
var currentwhratio=(currentw/currenth);
//alert('w '+currentw+' h '+currenth+' w/h '+currentwhratio);
//make image as large as possible while still
//fitting inside div and maintaining it's w/h ratio
if(currentw>currenth){
d1.width=300;
d1.height=300/currentwhratio;
} else {
d1.height=300;
d1.width=300*currentwhratio;
}
//alert('h '+d1.height+' w '+d1.width);
}
</script>

<style type="text/css">
.imagediv{
background-color: #000000;
width: 300px;
height: 300px;
text-align: center;
}
.img{
border: 0px;
}
</style>

<div class='imagediv' >
<img onload="resizeimage('image1');"
src="C:\Archive\graphic\BicyclingInSantaCruz.jpg"
name="image1">
<div>

Reply to this Message

Lauri Raittila - 27 Nov 2004 13:44 GMT

> > Why not resize the box to fit the image? Why make people download a
> > big image only to see a small one?
>
> Because I need the page (and the images) to be proportional to the
> screen resolution,

Impossible. You mean wwindow size.

> that's why use percent units to set the box
> dimensions and position.

Not good idea. You end up getting text one word at line wery easily. At
least if you use any percentage smaller than 30%

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2004

image grows outside a box