-2

I'm trying to figure out how to create a div that has a set aspect ratio (such as 4:3) and automatically resizes itself (i.e. width and height check link below) when resizing the window, without ever changing the ratio. The div should behave exactly like the video in the following jsfiddle, which I created using the object-fit property:

.wrapper video {
      object-fit: contain;
      width:100%;
      height:100%;
    }

here the jsfiddle: Fiddle

I realise it may sound like a trivial problem, but all solutions I have found so far were only able to resize a fixed-ratio div based on the window's width. Therefore, please be sure check out what happens when you minify the window's height in the jsfiddle. While using as much space as possible, the div should never leak out of the screen - neither on the right, nor on the bottom.

EDIT: I'm looking for a solution that takes into account the window's width AND height. The links posted so far are only taking into account the window's width.

Estarossa
  • 585
  • 4
  • 21
  • 2
    Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Isma Sep 20 '17 at 21:44
  • Hey Isma, thanks for your input. Unfortunately, this is exactly one of these solutions I was talking about: They do not account for the resizing of the window's height, only the window's width. – Estarossa Sep 20 '17 at 21:50
  • I don't this is not really possible AFAIK with pure CSS. You can't have max of *either* width or height.... – Paulie_D Sep 20 '17 at 21:56
  • Is this what you look for ? https://codepen.io/gc-nomade/pen/LzZZXB forked from https://codepen.io/gc-nomade/pen/NxzoqR but could not find the topic related . – G-Cyrillus Sep 20 '17 at 23:28

1 Answers1

1

For those who are having the same problem, I found a solution:

.greedy {
  border: 3px solid red;
  width: 100vw;
  height: 80vw;
  padding: 10%;
}

Here is the jsfiddle

Estarossa
  • 585
  • 4
  • 21