Changing image sizes proportionally using CSS

Question

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.)

score 208 · Accepted Answer · edited Mar 07 '21 at 15:52

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

score 51 · Answer 2 · edited Mar 07 '21 at 15:54

51

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.

edited Mar 07 '21 at 15:54

Peter Mortensen

30,738
21
105
131

answered Mar 28 '13 at 15:23

Nick Andriopoulos

10,313
6
32
56

1

I have tried this, but it still gives me images that are all different sizes and shapes i want the gallery to be uniform like so, [] [] [] [] not like [] [] [ ] [ ] [] – Lewis Mar 28 '13 at 15:25
3

use a combination of both the above: set height to a number (with auto width to keep scale), and limit the parent to a specific width with `overflow: hidden` to crop the excess – Nick Andriopoulos Mar 28 '13 at 15:26

score 29 · Answer 3 · edited Mar 07 '21 at 15:56

29

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.

edited Mar 07 '21 at 15:56

Peter Mortensen

30,738
21
105
131

answered Jul 08 '13 at 05:23

dmitry_romanov

5,146
1
33
36

This is kinda odd to answer with a property that is only supported in opera atm?! http://caniuse.com/object-fit – Simon Dragsbæk Oct 07 '13 at 07:20
5

I see your point, @Simon, thank you. I mentioned I have no idea if the property will be supported everywhere, but _even if it will not_, we can use it as a starting point to google for _alternatives_ which replace it. Another reason to post is that the answer would stay for some time while browsers are getting better with every day, so I answered targeting _this near future_ as well. – dmitry_romanov Nov 30 '13 at 05:59
1

Coming to this page several years later I was happy to find this 'future' answer! – petzi Dec 19 '18 at 06:37

score 9 · Answer 4 · answered Apr 30 '14 at 17:08

9

To make images adjustable/flexible you could use this:

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

answered Apr 30 '14 at 17:08

Stanislav

903
2
9
14

score 6 · Answer 5 · edited Mar 07 '21 at 16:02

6

transform: scale(0.5);

Example:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

See scale().

edited Mar 07 '21 at 16:02

Peter Mortensen

30,738
21
105
131

answered Aug 12 '20 at 20:49

Mahmoud

9,729
1
36
47

DickieBoy · Answer 6 · 2021-03-12T18:02:27.097

5

Put it as a background on your holder e.g.

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
&nbsp;
</div>

This will center your image inside a 120x120 div chopping off any excess of the image

edited Mar 12 '21 at 18:02

answered Mar 28 '13 at 15:27

DickieBoy

4,886
1
28
47

score 4 · Answer 7 · edited Mar 07 '21 at 16:01

If you don't want to stretch the image, fit it into a div container without overflow and center it by adjusting its margin if needed.

The image will not get cropped
The aspect ratio will also remain the same.

HTML

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

score 2 · Answer 8 · edited Mar 07 '21 at 16:02

2

This helps me to make the image 150% with ease.

.img-popup img {
  transform: scale(1.5);
}

edited Mar 07 '21 at 16:02

Peter Mortensen

30,738
21
105
131

answered Sep 21 '20 at 17:33

Gerald H

454
4
13

score 0 · Answer 9 · answered Apr 22 '22 at 20:00

Now this should be more as a last resort, but you could simply do math. For example, lets say that you have an image with a width of 595 and height of 300. You would create a unit rate by doing 300/595 = 0.504. Then, you would plug in a width that you would like to change the image to (1000px). 1000 x 0.504 = 504. This means that the height of the image should be 504 if the width is 1000 if you want to keep it proportional.

score -1 · Answer 10 · edited Mar 07 '21 at 15:59

-1

If you know the aspect ratio, you can use padding-bottom with percentage to set the height depending on the width of the diff.

<div>
   <div style="padding-bottom: 33%;">
      I have 33% height of my parents width
   </div>
</div>

edited Mar 07 '21 at 15:59

Peter Mortensen

30,738
21
105
131

answered Jan 13 '16 at 20:59

reco

459
1
6
13

Changing image sizes proportionally using CSS

10 Answers10

Example:

HTML

CSS

Linked