Question

How do you calculate the ‘used/determined’ height of an image when using width="100%". I need this to determine whether or not to use the width="100%" or set a height with a max of n px. This is because of images getting to big for their box (div).

I would like to calculate in advance and not to resize the images after they’re displayed in the browser. (The scenario is in a product-layout).

Answer 1

If the height is the limit, why not use height as the property to adjust the image size as well?

If this support is sufficient, you could use max-height and height:

img {
  height:100%;
  max-height:115px;  
}

example: http://jsfiddle.net/JdQK6/

You would set the max-height to the maximum height you’d want the image to be.