Aspect ratio and calc

aspect ratio cheat sheet

by jonahe

HTML

<div class="container">
  <h3>
aspect ratio cheat sheet
</h3>

<p>
  if you know the aspect ratio is, for example, 16:9
  
  that means you can use
</p>
 <pre>
    height: calc(9/16 * someKnownWidth);
 </pre>
 or
  <pre>
    width: calc(16/9 * someKnownHeight);
 </pre>
 


<div class="rectangle ratio-16-9-based-on-known-height">
  16:9
</div>
<hr>
<div class="rectangle ratio-16-9-based-on-known-width">
  16:9
</div>
<hr>
<div class="rectangle ratio-16-9-full-width-video">
  <h1>
    16:9 - full width
  </h1>
</div>

<hr>
<div class="rectangle ratio-16-9-full-width-video-with-max-height">
  <h1>
    16:9 - full width - and max height
  </h1>
</div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
}

.container {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
}
    
pre {
  margin: 0px;
}
.rectangle {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rectangle.ratio-16-9-based-on-known-height {
  height: 30vh; /* the known height */
  width: calc(16/9 * 30vh);
}

.rectangle.ratio-16-9-based-on-known-width {
  width: 30vh; /* the known width */
  height: calc(9/16 * 30vh);
}

.rectangle.ratio-16-9-full-width-video {
  width: 100vw; /* the known width */
  height: calc(9/16 * 100vw);
}

.rectangle.ratio-16-9-full-width-video-with-max-height {
  width: 100vw; /* the known width */
  height: calc(9/16 * 100%);
  max-height: 100vh;
}