Create a Container for Images to Retain Aspect Ratio

[ms_sws]

Is there a way to create a div or some container in which there will be an image such that the image fills the container but retains its aspect ratio? So if the container is 100px x 100px and an image is 200px x 100px it will be resized to 100px x 50px. Conversely, if the image is 100px x 200px then it resizes to 50px x 100px. An image of 400px x 50px becomes 100px x 12.5px and so forth.

The issue is I have to dynamically build the container pulling images from an image folder. The images can come in all sizes. But I want to make sure they all fit in the same square 'box' without distorting the image.

There is text and a button below the image and I want them to stay in the same 'spot' on the screen without being moved around because the height or width of the image above it grows/shrinks to accommodate a change in either the height or width. These can change but not outside a controlled 'box'.

Hopefully I've explained the intent.

Maybe there's a way to get the actual size (through Javascript or something) then calculate a percentage to resize the image to???

[fxm]

No container is needed.

Just define a placeholder IMG with the desired width= or height= (but NOT both, and do NOT use style). When the src= is changed, the browser will [by default] scale the image without changing the aspect ratio. Note: the scaled image may look awful [especially if it is a jpg] even when the disparity in size is comparatively small.

The easy way to keep the text and buttons fixed is to place them above or to the left of the IMG placeholder. If that is not possible, place them in a position:absolute <div> far enough down the page that the scaled image will not overlap it.

[ms_sws]

What do you mean by an img "placeholder"?

I have asked users to shoot for sizing their images before uploading them to the server for the page to grab and display within a certain range to avoid images being subject to pixelation and so on. The problem is they are still uploading pictures that are more panoramic while others are very much profile pics. So text is moving around on the screen. So it was my hope I could specify a limitation for their images so they wouldn't get beyond a certain width and height requiring me to resize them down taking the largest of those two numbers (width or height) and sizing that parameter down to some maximum. But in order to do that I need some way of knowing what the original pics dimensions are so that I can programmatically choose which parameter to set.

The img tag looks like:

<img id='i99999' src='image.jpg' alt='image (ID 99999)' height='350' onerror='dispMIA("i99999");' style='inline'>

Images are being hidden/displayed based on clicking a next/previous button so "style" is set to none when a user clicks back/forward past the currently displayed image. The onerror just displays a standard "missing photo" picture instead of image.jpg if it's not found.

But there is text below the image that gets changed along with the picture when the user clicks on the next/previous buttons. And it's annoying to see the buttons and text below the picture move up and down the screen because images being displayed has such different heights. It's even a greater problem to set the height leaving the width to dynamically adjust causing text and other content displayed on the screen to move around horizontally. So between the two options, setting the width is much better.

I was just hoping to eliminate the movement issue altogether by being able to force all images to stay within the same size/boundaries on the screen.

No way to do that?

[fxm]

What do you mean by an img "placeholder"?

<img height="200"> [or whatever]

When you fill in the src= the image will be scaled and rendered.

it's annoying to see the buttons and text below the picture move up and down the screen because images being displayed has such different heights.

I already suggested the easy fix for that: put the buttons and text above (or to the left) of the image.

It's even a greater problem to set the height leaving the width to dynamically adjust causing text and other content displayed on the screen to move around horizontally.

That won't happen if the containing <div> is located and styled correctly.

I was just hoping to eliminate the movement issue altogether by being able to force all images to stay within the same size/boundaries on the screen.

See this post http://www.daniweb.com/forums/post1257649.html#post1257649 for a cross-browser method of generating "thumbnails" of constrained size from source images of any size or shape. Pay particular attention to function ResizeThem()

[prabinrai]

hello friends try this.

<script language="javascript">
function autoSize(i) //to within table cell;
{
(i.width/i.parentNode.width) > (i.height/i.parentNode.height) ?
i.style.width = "100%" :
i.style.height = "100%"
};
</script>

put above code inside head

and use this tag inside body.

<img onload='autoSize(this) src="yourimage.asp">

enjoy:icon_lol: