Fixing Height of Images

Get Started
1

Hi,

I am inserting images into DIVS from a database. The images which are tall are over shooting the height of the DIV. I have fixed the width of the image so they dont overshoot the DIV width ways.

However I am struggling to fit the images in height whys. Can anyone advise how to do this please. Is it possible to fix both height and width so whatever the dimensions of image it will not overshoot the DIV.

2

Yes. You can do it via CSS, such as

img {width: 100px; height: 100px;}

or in the HTML itself:

<img width="100" height="100" src="">
3

I came up with similar solution but Ralph beat me to it.

Here is my:

<!DOCTYPE HTML>
<html>
<style type="text/css">
   div { 
	   height:300px; 
	   width:300px}
   img { 
	   height:100%;
	   width:100%}
</style>
<body>
<div>
   <img src="myPicture.jpg" alt="myPicture"/>
</div>
</body>
</html>

However, you will notice that the image will be distorted if the height and width ration are not the same as div. Suggestion anyone?

4

Apply the image as a background and use background-size: contain. Otherwise, you will need to use JavaScript which can get messy.

5

Apply the image as a background and use background-size: contain.

if the images are being retrieved from a DB , then they are best used as CONTENT … while it’s not impossible to generate CSS and giving unique matching IDs for each div… it just to convoluted to be useful.

I would suggest targeting the IMG tag ( as was mentioned before)

img {height:100%; width:100%:} or even better:
img {height:100%; max-width:100%;} or img {width:100%; max-height:100%; } the idea behind the latter two option is to prevent distortion in case the aspect ratio is not 1:1

6

Many thanks,

img {
height:100%;
width:100%}

This works perfectly in IE and Firexfox but look completely messy in Google Chrome.

How do I set the image as background?

7

Well it works in Google Chrome if I fix the height of the div in pixels but I dont really want to do this.

8

Apologies Dresden, do you mean I should just set the image height in the DIV I am inserting the image into.

Google Chrome seems to dislike this and wont set the image to 100% high unless the div has a height.

9

That won’t work if images have different orientations, dimensions and aspect ratios.

10

The div really should expand to fit the image, unless you’ve restricted it with CSS. What do you mean by “over shooting”?

11

Hi,

I have set the DIV height to 300px which cross-browser appears to work best.

Lets say I have 5 images at 250px high these will fit inside the DIV. However if I have 5 images at 350px high the image is taller than the DIV so it goes over the border of the DIV.

If the image is 250px and I increase the DIV height to 360px then in some browsers their is a huge gap at the bottom.

If I fix the height of the image to height: 100% it works perfectly in IE and Firefox. However in Chrome it squashes the image to just a few pixels if the height of the DIV is not fixed elsewhere on the site.

For example the logo will squash up. But I cant do this because different browsers treat the height differently.

It just seems catch-22.

12

Why not set the height of the div to 350px and the height of the image to 350px?

13

if the height of the DIV is not fixed elsewhere on the site.

are you using a CLASS to target the div in question?

the css should not be DIV IMG{}, but something like : .myClass IMG{} or even div.myClass IMG{} as far as the extra pixels in Chrome goes am not entirely sure on this, but it may have to do with how images are aligned. Try adding vertical-align:top | bottom| middle see if that changes anything.