Changing image sizes proportionally using CSS?

You need to fix one side (for example, height) and set the other to auto.

For example,

 height: 120px;
 width: auto;

That would scale the image based on one side only. If you find cropping the image acceptable, you can just set

overflow: hidden;

to the parent element, which would crop out anything that would otherwise exceed its size.

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

Example:

HTML:

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}