Fit images to container size keeping aspect ratio

Question

I can't find a way to display the thumbnails on this page as fitting into boxes of same dimensions (height:122px and width: 178px) without changing their respective aspect ratio. I don't know the thumbnails original dimensions. I have several nested divs as you can see, and the one that is of class .picture1 has those dimensions, but the images do not fit into this div. Can you help me ?

Thanks

Is this meant to be just a html/css solution or are you considering javascript? — Bruno, Oct 16 '12 at 10:23
it is better if it is just html/css, but I can do jquery. thank you @Bruno — louis, Oct 16 '12 at 10:28
Have a look at the following http://stackoverflow.com/questions/757782/how-to-preserve-aspect-ratio-when-scaling-image-using-one-css-dimension-in-ie6 — Bruno, Oct 16 '12 at 10:30
thanks but it is more complex in my case (several divs) and this doesn't work. Moreover, sometimes thumbnails are portrait sometimes they are landscape. — louis, Oct 16 '12 at 10:31
In that case http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio — Bruno, Oct 16 '12 at 10:33
I tried that already but it assumes taht the image already has width and height in css but I don't know the original dimensions so I can't specify this in css. — louis, Oct 16 '12 at 10:37
Any reason why you'd want to use jQuery, when the pure CSS version, using `max-width` and `max-height` works fine? — cowcowmoomoo, Oct 16 '12 at 10:37
@cowcowmoomoo no reason I am fine with pure css, but I cannot make max-width and max-height work with this case. Did you check the link? — louis, Oct 16 '12 at 10:40
@cowcowmoomoo I am testing with max-height max-width but it crops the image. — louis, Oct 16 '12 at 10:48
Not being able to use css properties to establish width or height of images sometimes happens when you access those properties before the images are loaded. In some instances, when images are loaded from cache, they also have no width or height. The website is using jQuery so maybe try a plugin like [this] (https://github.com/desandro/imagesloaded) to resize your images after they have loaded. — Bruno, Oct 16 '12 at 10:54
@louis I added the `max-width` and `max-height` to the `.work-view img` class. This worked fine in Chrome and Firefox, without cropping the img. — cowcowmoomoo, Oct 16 '12 at 11:02
@louis Have you considered not using as many divs to contain you image? They don't seem to serve any specific purpose. — cowcowmoomoo, Oct 16 '12 at 11:03
@cowcowmoomoo I just tried max-width:100%; max-height:100%; which does not resize small enough and also max-width:168px; max-height:122px; which crops the image. The multiple divs are used in jquery to perform different actions, I can't remove them. — louis, Oct 16 '12 at 11:27
@cowcowmoomoo actually I think using `max-height=100%` and `max-width=100%` for `.work-view img` works partially, but it doesn't resize to the right container...any idea why? — louis, Oct 16 '12 at 11:36
@louis It's because of the many divs you are using. The 100% relates only to the immediate parent of the img. You would need to apply the 100% width to all divs except the main parent, and eliminate any padding. — cowcowmoomoo, Oct 16 '12 at 12:04
@cowcowmoomoo ok I just applied 100% to the intermediate divs and the dimensions to the final container....doesn't work...the vertical image is cropped....I am gonna try to eliminate padding — louis, Oct 16 '12 at 13:36
@cowcowmoomoo ok that is better like this. I also put `display:block` to the divs. Now how to center the img into the immediate parent? — louis, Oct 16 '12 at 13:56
@cowcowmoomoo thank you. But they are centered only horizontally, I would like them to be also centered vertically. — louis, Oct 16 '12 at 15:20
@louis Have a look at [this](http://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul) — cowcowmoomoo, Oct 17 '12 at 07:28

score 7 · Answer 1 · edited Oct 16 '12 at 11:15

7

IS this really a problem. After checking your page its quite simple that if you add the below class the images fit inside the comtainer

    .work-view img {
      max-height: 100px;
      padding: 5px 5px 2px;
      max-width: 150px;}

enter image description here

edited Oct 16 '12 at 11:15

cowcowmoomoo

507
2
10

answered Oct 16 '12 at 11:01

Vivek Dragon

2,218
4
27
48

The question requires that the image needs to maintain its aspect ratio. If the image is smaller than the div it will not line up perfectly either. – Bruno Oct 16 '12 at 11:05
1

This code example has been updated to use `max-width` and `max-height` which keeps aspect ratio. – cowcowmoomoo Oct 16 '12 at 12:02

Fit images to container size keeping aspect ratio

1 Answers1

Linked