image grows outside a box

[Abs]

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

[Neal]

On Fri, 26 Nov 2004 18:05:16 +0100, Abs <ab**@yahoo.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.

[Lauri Raittila]

in comp.infosystem s.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>

[jake]

In message <30************ *@uni-berlin.de>, Abs <ab**@yahoo.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

[Stan Brown]

"Abs" wrote in comp.infosystem s.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/

[Abs]

Stan Brown wrote:

"Abs" wrote in comp.infosystem s.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.

[mscir]

Abs wrote:

Stan Brown wrote:

"Abs" wrote in comp.infosystem s.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(img name){
var d1=document.ima ges[imgname];
//get current image size and w/h ratio
var currentw=d1.wid th;
var currenth=d1.hei ght;
var currentwhratio= (currentw/currenth);
//alert('w '+currentw+' h '+currenth+' w/h '+currentwhrati o);
//make image as large as possible while still
//fitting inside div and maintaining it's w/h ratio
if(currentw>cur renth){
d1.width=300;
d1.height=300/currentwhratio;
} else {
d1.height=300;
d1.width=300*cu rrentwhratio;
}
//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="resizei mage('image1'); "
src="C:\Archive \graphic\Bicycl ingInSantaCruz. jpg"
name="image1">
<div>

[Abs]

jake wrote:

In message <30************ *@uni-berlin.de>, Abs <ab**@yahoo.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!

[Lauri Raittila]

in comp.infosystem s.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>