resize an image in proportion with CSS, is it possible?

Question

Is there a way to resize images retaining their proportions with CSS?

The container has a fixed width and height

<div class="container">
   <img class="theimage" src="something" />
</div>

and the reason I'm asking is because the layout can change (from list to icons via a class) and the images need to be resized (about 40% less) in proportion.

I know how to do it with JavaScript and also how to resize via CSS, but don't really believe it can be done in proportion with CSS, unless there is some clever way.

possible duplicate of Resize image proportionally with CSS?

Yi Jiang
– Yi Jiang

2011-03-07 10:19:03 +00:00
Commented Mar 7, 2011 at 10:19 — Yi Jiang
– Yi Jiang, Commented Mar 7, 2011 at 10:19
good find! thanks for pointing that out to me.

jackJoe
– jackJoe

2011-03-07 10:21:48 +00:00
Commented Mar 7, 2011 at 10:21 — jackJoe
– jackJoe, Commented Mar 7, 2011 at 10:21

Arindam Paul · Accepted Answer · 2011-03-08 05:13:43Z

6

.theimage{
    width:100%;
    height:auto;
}

or

.theimage{
    width:auto;
    height:100%;
}

Depending on how you wanna give the scale preference... :) :)

Thats all.

edited Mar 8, 2011 at 5:13

answered Mar 7, 2011 at 11:46

Arindam Paul

3881 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jackJoe Over a year ago

but that doesn't solve the issue, I don't know the proportion of every image and so I can't set just one to 100%, just check my example at jsfiddle and try for yourself.

Arindam Paul Over a year ago

Are you saying loosing aspect ratio is fine with you ... only thing that concerns you, is to fit the image in that div?? If not then one of the above will solve your problem depending on which one becomes bottleneck for you.. is it the width or height... But if it is otherwise .. just use width:100%, height:100%... jsfiddle.net/arindam89/fDNah/12

jackJoe Over a year ago

no, I need to retain the proportion (check the title of this question), and this is not javascript I can't find out wich is the biggest (the height or the width), so that CSS you suggested won't work for me, do you see my problem?

Andrii Verbytskyi · Accepted Answer · 2015-06-19 12:58:44Z

5

To save the Image ratio while scaling you can use object-fit CSS3 propperty.

Useful article: Control image aspect ratios with CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

answered Jun 19, 2015 at 12:58

Andrii Verbytskyi

7,6913 gold badges51 silver badges40 bronze badges

2 Comments

Andrii Verbytskyi Over a year ago

Yes, unfortunately it doesn't (

Vitaly Zdanevich Over a year ago

Strange, because object-fit is the standard css3 w3.org/TR/css3-images/#object-fit

Collectives™ on Stack Overflow

resize an image in proportion with CSS, is it possible?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related