Getting Image height before the image loads in HTML

Question

I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.

So my problem: How do I set the height for my div so that I can fit images?

Answer 1

Pre-load them into javascript image objects then just reference the height and width.

Might take some clever devilry to work in all browsers...

function getSize(imgSrc){

var aImg = new Image();

aImg.src = imgSrc;

aHeight = newImg.height; aWidth = newImg.width;

}

Answer 2

You can:

1. Not specify the height of the div, and let it expand automatically

2. Once the image is loaded do:

   document.getElementById("myDiv").height = document.getElementById("myImage").height

Answer 3

We'll need a little more info to be very useful. You can get the height & width of an image after the page loads via Javascript (info), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.

If you're using PHP, there's getimagesize(), which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.

Answer 4

If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.

Answer 5

If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with <script src=> statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)

If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.

Answer 6

This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"

The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.

But that's just my own opinion, though. I have no empirical data to back that up.