Images are not being dispalyed in equal size

HTML & CSS
1

Hi

I have deployed four images in the front page of my website using the img tag, and specified the height and width, but they are not appearing as equal size.

Is there a solution to this other than resizing the image which I know is better for the web browser as it takes less memory?

Regards

Yamin

2

Could we see the page in question?

3

Usually you only specify either the height or width, not both, and the image gets resized proportionally

4

@ralph - its www.eyecatchersecurity.com - look at the four images below the main slideshow

@irishman - well with the image tag I see a width and height parameter. You maybe right but I see everyone using both of them and not seen any documents where it says you may only use one.

Regards

5

Most of your images are using the image width as the setting, <img height=“500” width=“500” src=“http://www.eyecatchersecurity.com/images/dvrs/GT904Hweb.jpg”> this one is 500 wide but only 192 high despite the ‘height’ you have set.
As your thumbnail images are all resized from large images they are also quite big files. It may be worth creating thumbnail images of the height and width you want and then loading these in place of the ones you have at the moment. This would allow all your thumbnails to be of uniform size, smaller than currently, but ypur big images would still be how they are now.

6

You have this in your CSS:

img {
    border: medium none;
    height: auto;
    max-width: 100%;
}

The height: auto is over-riding the declared height on your images. Remove this and they will display at the sizes declared. Then you’ll have a different problem, because the declared sizes do not scale proportionally to the original image, and your images will appear distorted. :slight_smile:

If you need an image to appear in a 150px by 75px box, and the original image does not have a 2:1 aspect ratio (e.g. 400px x 200px) then I don’t see you have much option but to edit the image. You could just declare the height and let the image scale, but in the case of the second one, that will leave you with a small square image instead.

irishman is referring to resizing images here. Ideally, you reduce the image to the size at which you want it to display and then declare both width and height.

7

Hi technobear

Bingo, you have answered my curosity. I was wondering why only the width was set by the tag but the height was changing automatically. Makes sense.

I guess I will create the thumbnail images of those size, that would be the best option I guess.

Regards

8

Glad I could help. :slight_smile:

In my experience, there’s nothing quite like doing things the right way to make sure they work. :wink: