Making in image best fit in a floating container

chaskent used Ask the Experts™
Hi Experts!
I am experimenting with a mysql driven php page which needs to display a photograph which could be of various dimensions.
I want to place it in a container of fixed height and width.
If the photo is larger than the container I would like it to adjust  without distorting its proportions, so that either its height or width completely fills the container according to which of those two  is relatively the greater. IE if the photo is a landscape shape and the container a portrait, then the whole width must fit within the container and I would tolerate  the consequent gap, witin the container, above and below the image.

Is that something which CSS can do on its own or would I have to create PHP code to read the image dimesions and then define the CSS styling?

At present , the image overflows the container and partially obscures the conent of its neighbour in,ALCATEL4,8240.html .

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

I don't think that you can use CSS to do that dynamically.  You can use javascript to check the width and height of the image and compare that to the width and height of your fixed div.  If your image tag has id imageid, then document.getElementById('imageid').width and document.getElementById('imageid').height are the dimensions.  You need a scale factor which would be:

scale = Math.min(divheight/document.getElementById('imageid').height, divwidth/document.getElementById('imageid').width)

e.g. If the div height is 400 and the image height is 600 and the div width is 400 and the image width is 400, then the scale factor is .666.

You need to set either the width or height attribute of the imageid element, not both and the image should scale.


document.getElementById('imageid').width = document.getElementById('imageid').width*scale


Thank you sscoti. I am still quite new to PHP , CSS and Mysql and have not yet ventured into Javascript at all. I don't know if some client side computers  can have their scripting turned off etc.

At present the call to place the image is   <img src="./pichndsetl/alcatel48240l.jpg" title = "T2 75 ohm Primary Rate Card"> (or in php   echo "<img src=\"$photonamel\" title = \"$descriptName\">";)

 If JavaScript was used as you suggest would all modern browsers interpret it or might they have scripting switched off?
Not knowing Javascript at all , is it a case of entering a single block of code to achieve this?  If so where would you put it in the php page? and would you have to change <img src > call? What is the script?

If a similar thing could be done in PHP I would prefer it and if pointed along the path like you have done above, I could probably work it out. With JavaScript I am afraid you are going to have to "spoon feed" it!
You could try replacing the image code with:

echo "<img id=\"imageId\" src=\"$photoname\" title = \"$descriptName\">";

If you don't have any other onload handlers you can add this to your javascript:

<script type="text/javascript">
window.onload = function () {

scale = Math.min(500/document.getElementById('imageId').height, 500/document.getElementById('imageId').width);
document.getElementById('imageId').width = document.getElementById('imageid').width*scale;



Sorry for delay - was away.
Thank you,Scotti - looks like "Teach yourself JavaScrip" is my next book to read!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial