CODEWITHSUNDEEP
jqueryhtmlcss
user2629665
user2629665

Reputation: 1

Resizing images with percent values while changing their aspect ratio

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;
}

Upvotes: 0

Views: 300

Answers (2)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

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>

Upvotes: 1

Nitesh
Nitesh

Reputation: 15739

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.

Upvotes: 0

Related Questions