Resize image without distorting it

Question

Currently I am doing a very simple method of doing this with the code below.

<div style="width: 100%;">
    <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg">
</div>

If I remove the height="250" portion of the code it prints the image to be the normal quality + normal size by I want it to be limited to 250 in height and return something like this image.

But instead it returns something which looks like the one displayed below.

I've read your question three times and still don't understand what you're asking. — j08691, Dec 29 '15 at 02:34
So if I understand correctly, you only wish to maintain the aspect ratio, and not crop the image? And I am sort of with @j08691 on this one.. Still confused. — Vandal, Dec 29 '15 at 02:35
Isn't this what you want? http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio — Steve Wellens, Dec 29 '15 at 02:37

itsols · Answer 1 · 2015-12-29T02:41:37.583

12

What you should do is simply use 'auto' for the CSS width attribute like this:

<img style="width:auto; height:250px" src="http://i.imgur.com/lNB7QSt.jpg">

That should do what you're expecting.

edited Dec 29 '15 at 02:41

answered Dec 29 '15 at 02:39

itsols

5,406
7
51
95

They want it to crop to the center of the image. I assumed the same. – Bill Criswell Dec 29 '15 at 02:40
Nope, I don't think so... The question has an example of a scaled image. Not cropped. The OP doesn't seem to be very tech-savvy. – itsols Dec 29 '15 at 02:44
They were savvy enough to crop the image exactly how they'd like it displayed and it's also damn near precisely the center of the image. – Bill Criswell Dec 29 '15 at 02:47
and maybe `` so in case the image is less than 250px high, it won't be expanded (= looking bad) – Johannes Dec 29 '15 at 02:50

score 8 · Accepted Answer · answered Dec 29 '15 at 03:06

This is the only sane approach I can think of (using background-size: cover). You can probably do something tricky with the existing markup but I don't feel like it'll leave you with anything flexible enough.

.frame {
  height: 250px;
  background: transparent no-repeat center;
  background-size: cover;
}

<div class="frame" style="background-image: url('http://i.imgur.com/lNB7QSt.jpg')"></div>

score 3 · Answer 3 · answered Jul 08 '21 at 23:49

3

I believe this can simply be done with object-fit.

<div style="width: 100%;">
 <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg" style="object-fit: cover;">
</div>

answered Jul 08 '21 at 23:49

Dieu-Donne

31
3

score 2 · Answer 4 · answered Dec 29 '15 at 02:39

2

The issue is with setting width to 100%. Try removing width="100%", or set the width manually based on the aspect ratio.

answered Dec 29 '15 at 02:39

James Zatsiorsky

207
2
7

score 0 · Answer 5 · answered Dec 29 '15 at 02:40

Using the info from the link in the comment I made...

img {
    display: block;
    max-width:230px;
    max-height:250px;
    width: auto;
    height: auto;
}

<div style="width: 100%;">
    <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg">
</div>

score 0 · Answer 6 · answered Dec 29 '15 at 02:42

.image-name {

    display: block;
    max-width: 100%;
    max-height: 250px;

}

.image-name2 {

    display: block;
    width: auto;
    max-width: 100%;
    max-height: 250px;

}

<img class="image-name" width="100%" src="http://i.imgur.com/lNB7QSt.jpg?1">

Above is the image with no quality change + the width that you're looking for.


Below is the image with the height you're looking for but the width of the normal image.

<img class="image-name2" width="100%" src="http://i.imgur.com/lNB7QSt.jpg?1">

score 0 · Answer 7 · answered Nov 29 '22 at 20:53

0

How about something like this?

img {
  display: block;

  max-height: 200px;
  width: max-content;
}

answered Nov 29 '22 at 20:53

Philippe Fanaro

6,148
6
38
76

Resize image without distorting it

7 Answers7