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

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% le开发者_如何学运维ss) 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.

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

or

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

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

Thats all.

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