Resizing images with percent values while changing their aspect ratio

Question

I want to design my mini page using only percentage values so it adapts to various resolutions. My problem is that when I use percentage values in "height" and "width" CSS values on all "img" tags, they scale properly but their aspect ratio remains static, resulting in something like this: DEMO

My question is how to make them have 1:1 aspect ratio?

Here's my code:

img {

width: 20%; height:20%;
margin: 2% 2% 2% 2%;
padding: 0 0 0 0;
border: 2px solid #666;
opacity:0.5;
float:left;
}

This question has already been answered See the link below http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio — Vinay Pratap Singh Bhadauria, Jul 29 '13 at 09:34
Setting the "img" tag's "max-height" and "max-width" to 100% didn't change anything. — user2629665, Jul 29 '13 at 09:45
have you used the whole java script method specified or just added max height /width to the css of the image. — Vinay Pratap Singh Bhadauria, Jul 29 '13 at 10:04
The jquery script uses height and width fixed with pixel values and I wanna have percentage values. — user2629665, Jul 29 '13 at 12:21

Miomir Dancevic · Answer 1 · 2013-07-29T09:48:22.887

1

Add and try

    img {
        border: 0;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }



     #logo {
        width: 20%;
        margin: 2% 2% 2% 2%;
        padding: 0 0 0 0;
        border: 2px solid #666;
        opacity:0.5;
        float:left;
        }

<div id="logo"><img src="images/logo.png" /></div>

edited Jul 29 '13 at 09:48

answered Jul 29 '13 at 09:34

Miomir Dancevic

6,726
15
74
142

I don't see how exactly that would help me... I want to keep my border and when I use your code instead of mine, the images just appear their normal sizes. – user2629665 Jul 29 '13 at 09:38
Again, didn't change anyhting. – user2629665 Jul 29 '13 at 09:52
What i see on this demo, you wat to make thumbs? – Miomir Dancevic Jul 29 '13 at 10:06

score 0 · Answer 2 · answered Jul 29 '13 at 09:35

0

For that you need to have all the images in the same px values, so that when you resize them with proportion with the aspect that you want, it will keep its aspect ratio. For example, if the image original size is 1000 by 1000 px, if you resize in %age, the width and height will scale according to the square, as both width and height are equal. If you want them in a consistent aspect, all should have uniform pixel values.

answered Jul 29 '13 at 09:35

Nitesh

15,425
4
48
60

I figured out that if they all had their aspect ratio already 1:1 then it would work fine, but I'm looking for different solution, I'm sure there is one, I don't really feel like resizing them all by myself in PS. – user2629665 Jul 29 '13 at 09:39
Then you should use background clip property with rect. – Nitesh Jul 29 '13 at 09:41
What this will do is, it will make your images to crop to the aspect that you are looking for. But I still stick to keeping my original posted solution. As it will ensure total consistency. – Nitesh Jul 29 '13 at 09:43

Resizing images with percent values while changing their aspect ratio

2 Answers2