How to resize an image so it is always the biggest possible without the being bigger than the window height OR than the window width?

Question

I have an image I want as big as possible, but I want 100% of the image visible no matter how the window is resized. I also want to maintain image ratio.

I have tried doing

img{
   width: 100vh;
}

but that will cut off some of the image depending on the size of the window.

Here are some examples of what I want:

When the width is restrictive

When the height is restrictive

Possible duplicate of [CSS force image resize and keep aspect ratio](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) — Maikel, Jul 25 '19 at 17:34
for "as big as possible", perhaps you're looking for `100vmin`? — Sid Vishnoi, Jul 25 '19 at 18:00
`width: 100vw; height: 100vmin;` did keep it max size, except it then doesn't maintain aspect ratio. — Joey Carlisle, Jul 25 '19 at 22:10

Martin Choraine · Accepted Answer · 2019-07-26T14:40:44.987

0

You could try to set your image with screen size then use object-fit: cover to set image always fitting the container;

img{
   width: 100vw;
   height: 100vh;
   object-fit: contain;
}

edited Jul 26 '19 at 14:40

answered Jul 25 '19 at 17:42

Martin Choraine

2,296
3
20
37

1

They want `contain`, not `cover` cc @JoeyCarlisle – Kaiido Jul 26 '19 at 01:12
@Kaiido, That worked! thank you. I'll choose your answer if you decide to write it up. – Joey Carlisle Jul 26 '19 at 14:40

DraganAscii · Answer 2 · 2019-07-25T17:48:43.853

0

Try the following, it will max out the width of the containing element and also use height auto to maintain the aspect ratio of the image(s)

img {
    width:100%;
    height:auto;
  }

edited Jul 25 '19 at 17:48

answered Jul 25 '19 at 17:42

DraganAscii

322
1
9

This behaves the same as original code, I have to scroll to see the whole image, which is undesired. – Joey Carlisle Jul 25 '19 at 22:07

How to resize an image so it is always the biggest possible without the being bigger than the window height OR than the window width?

2 Answers2