Changing image sizes proportionally using CSS

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However, when I change the CSS code to,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

I get images that are all the same size, but the aspect ratio is stretched, ruining the images. Is there not a way to resize the image container and not the image instead? Allowing me to keep the aspect ratio, but resize the image still. (I don’t mind if I cut off some of the image.)

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

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.

You can use the object-fit CSS 3 property. Something like:

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

It is not exactly your answer, though, because it doesn't stretch the container. But it behaves like the gallery and you can keep styling the img itself.

Another drawback of this solution is still a poor support of the CSS 3 property. More details are available here: CSS 3 Object-fit Polyfill. A jQuery solution can be found there as well.

To make images adjustable/flexible you could use this:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

Changing image sizes proportionally using CSS

Related

Recent Posts