How to change height of a div so it all fits in the screen while keeping 16:9 aspect ratio

Question

I've seen a post regarding my problem, but the results didn't fully satisfy me, so please don't consider this as a duplicate.

Basically, in the post I linked, @Web_Designer is explaining how to keep the div in the window viewport and resize it while keeping the 16:9 (in my case) aspect ratio. I'm making a kind of presentation website though, and while the slides keep proper aspect ratio, the site is scrollable (vertically) which is not good because I want it to reduce height so the entire slide would fit in the view. While I enable fullscreen though, there is no problem and scroll bars "disappear".

A quick explanation of my code:

.container is a container containing the whole presentation

.presentation-place is a div containing all the slides, we can consider it as our main subject.

.slide is a class containing slides which has nothing to do with what I'm trying to achieve.

body {
  background: black;
  user-select: none;
  margin: 0;
}

.container {
  box-sizing: border-box;
  resize: both;
  overflow: auto;
  max-width: 100%;
  height: 100vh;
}

.presentation-place {
  user-select: none;
  background: white;
  display: inline-block;
  width: 100%;
  margin: 0;
  position: absolute;
  padding-bottom: 56.25%;
}

.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: red;
}

<body>
  <div class="container">
    <div class="presentation-place">
      <div class="slide">
        <h1>Test slide</h1>
      </div>
    </div>
  </div>

Are you saying that object-fit contain is not giving you what you want? — A Haworth, Nov 08 '22 at 19:27
`overflow: auto;` will add a scrollbar should the container's height exceed the height of viewport (at `height: 100vh;` it most likely will unless everything has been reset). `object-fit` applies to [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element) like `` or ` — zer00ne, Nov 08 '22 at 19:39

score 1 · Accepted Answer · answered Nov 08 '22 at 21:33

We want the presentation place to always have aspect ratio 16:9 and to fill as much as possible of the screen.

When the viewport's aspect ratio is greater than 16:9 this means we want the presentation place to have the height of the viewport and when it is less we want the presentation place to have the width of the viewport.

body {
  background: black;
  user-select: none;
  margin: 0;
}

.container {
  box-sizing: border-box;
  resize: both;
  overflow: auto;
  max-width: 100%;
  height: 100vh;
}

.presentation-place {
  user-select: none;
  background: white;
  display: inline-block;
  margin: 0;
  position: absolute;
  aspect-ratio: 16 / 9;
}

.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: red;
}

@media screen and (max-aspect-ratio: 16 / 9) {
  .presentation-place {
    width: 100vw;
  }
}

@media screen and (min-aspect-ratio: 16 / 9) {
  .presentation-place {
    height: 100vh;
  }
}

<body>
  <div class="container">
    <div class="presentation-place">
      <div class="slide">
        <h1>Test slide</h1>
      </div>
    </div>
  </div>

How to change height of a div so it all fits in the screen while keeping 16:9 aspect ratio

A quick explanation of my code:

1 Answers1