image grows outside a box

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

On Fri, 26 Nov 2004 18:05:16 +0100, Abs <abs2 (AT) yahoo (DOT) com> wrote:

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 ?

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

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

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?

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

In message <30p62hF31uoeuU1 (AT) uni-berlin (DOT) de>, Abs <abs2 (AT) yahoo (DOT) com> writes

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

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.

--
Jake

"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?

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

Stan Brown wrote:

"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?

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.

Abs wrote:

Stan Brown wrote:

"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?

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.

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>

jake wrote:

In message <30p62hF31uoeuU1 (AT) uni-berlin (DOT) de>, Abs <abs2 (AT) yahoo (DOT) com> writes

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


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.

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

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

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%




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