Resize img proportionally with CSS (caveat: preset max-width/height)

Question

I have an overlarge image file, so I set desired max-width/height in pixels. Now I want that image to shrink with page resize, while maintaining aspect ratio. (In Chrome browser specifically, if that's relevant.)

<img style="max-width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">

I cannot for the life of me get this to work. I tried setting max-height.

img {
max-height: 100vh;
}

But while it resizes vertically very nicely, it doesn't resize horizontally. As in if the screen is too narrow, it overflows to the right.

UPDATE:

Okay, so best I've come up with is:

<img style="width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">

and CSS:

img {
max-height: 100vh;
max-width 100%;
object-fit:scale-down;
}

It works, it scales both ways ... it sometimes leaves a huge white-space between the image and the side borders when the image is scaled down. But I suppose that's better than a big whitespace gap above/below when you set img height instead. At least now it's not displacing my text (which is above/below, not around the image).

Only real solution seems to be to go without borders. Not great aesthetically, but I may have to consider it 'good enough' unless someone has a better answer?

Welcome to Stackoverflow. Can you create a MCVE? Show us some code. Did you try with object-fit or background-size? — aloisdg
– aloisdg, Commented Oct 15, 2017 at 0:00
Hi, yes I'm new. Not sure what you mean by MCVE? Background-size doesn't seem relevent. Not a background image. Will check object-fit. — N. River
– N. River, Commented Oct 15, 2017 at 0:29
Okay, object-fit seems to give the same issue as above: resizes if screen is too short, but not if too narrow. — N. River
– N. River, Commented Oct 15, 2017 at 0:33
I did check that link. Also, spoke too soon about object-fit. Sort of. Managed to get working with specified 'max-height' as 'height' instead, 'max-height: 100vh', 'max-width 100%', and 'object-fit:scale-down'. Problem is there is a big white-space between image and left/right borders. — N. River
– N. River, Commented Oct 15, 2017 at 2:03

Jay Hamilton · Accepted Answer · 2017-10-15 05:03:05Z

1

This will work for a generic case. It will not go over the max, but will resize smaller appropriately.

<div style="max-width: 700px">
 <img style="height: auto; width: 100%"  
  src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">
</div>

I made some changes using your image, I think this is resizing like you described.

edited Oct 15, 2017 at 5:03

answered Oct 15, 2017 at 0:04

Jay Hamilton

1145 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

N. River Over a year ago

That doesn't resize at all for me. (I'll try and add some code in a tick if that helps.)

Jay Hamilton Over a year ago

I am not at a spot I can test. may need display: block?

N. River Over a year ago

Nope, still no change.

N. River Over a year ago

It does resize both ways ... but doesn't maintain aspect ratio.

Jay Hamilton Over a year ago

I removed the max-height from the parent and set the hight on the child to auto.

|

Collectives™ on Stack Overflow

Resize img proportionally with CSS (caveat: preset max-width/height)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related