Resize image proportionally to CSS, is this possible?

Question

Is there a way to resize images while maintaining their aspect ratio using CSS?

The container has a fixed width and height

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

and the reason I ask is because the layout can change (from the list to the icons through the class) and the images should be changed (40% less) in proportion.

I know how to do this using JavaScript, as well as how to resize using CSS, but you really don't believe that this can be done in proportion to CSS, unless there is a reasonable way.

Answer 1

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

or

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

Depending on how you want to assign scale preference ... :) :)

That's all.

Answer 2

To preserve image ratio when scaling, you can use object-fit CSS3 propperty.

Useful article: Controlling image proportions with CSS3

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