<h1>Mixed content with fixed ratio</h1>
<p class="desc">Maintain the aspect ratio on HTML elements with unknown heights and contents, using SCSS @mixins and CSS Custom Properties. <br/> <a target="_blank" href="https://www.gsarigiannidis.gr/maintain-aspect-ratio-on-elements-with-unknown-heights-and-contents/">Read the details</a></p>
<div class="switcher container">
  <p>Ratio:</p>
  <input type="number" id="width" placeholder="Ratio width" value="16" min="1" max="100">
  <input type="number" id="height" placeholder="ratio height" value="9" min="1" max="100">
</div>
  <div id="container" class="container">
    <div class="item">
      <img src="http://placehold.it/450x250/7589be/fff">
    </div>
    <div class="item">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/FGe7zJnrIgo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
     <div class="item">
      <img src="http://placehold.it/800x450/7589be/fff">
    </div>
     <div class="item">
         <h3>Just text</h3>
    </div>
    <div class="item">
      <img src="http://placehold.it/850x850/7589be/fff">
    </div>
    <div class="item">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d50310.604001548956!2d23.703320022062158!3d37.99083200838513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2zzpHOuM6uzr3OsQ!5e0!3m2!1sel!2sgr!4v1601216487508!5m2!1sel!2sgr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
    <div class="item">
      <img src="http://placehold.it/550x250/7589be/fff">
    </div>
     <div class="item">
       <div class="content-container">
         <p>More text of unknown length.</p>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
       </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1600x450/7589be/fff">
    </div>
  </div>  
/* Just for the demo */
* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', Arial;
  background: #dce2e2;
  padding: 1em;
}
.desc {
  font-weight: 300;
  text-align: center;
  max-width: 1024px;
  margin: 0 auto 2rem auto;
  a {
    background: #45ba04;
    color: #fff;
    padding: .2rem .7rem;
    border-radius: 3px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    margin-top: .2rem;
  }
}
.container {
    margin: 0 auto;
  &.switcher {
  justify-content: center;
  padding: 0 1em 2em 1em;
      font-weight: 300;
    input {
      padding: .5rem;
      margin: .2rem;
      max-width: 55px;
    }
  }
}
.item {
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  border: 1px solid #bbb;
  border-radius: 10px;
  background: #444;
  color: #fff;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  display: flex;
  p {
    padding: 0 1rem;
  }
}
h1 {
  text-align: center;
  font-weight: lighter;
  color: #444;
  text-shadow: 1px 1px 1px #fff;
  font-size: 3em;
}


/* The CSS that you will actually need */
@mixin ratio($rw, $rh, $mw, $cols, $gap) {
  height: calc( ((100vw/#{$cols})/(#{$rw}/#{$rh})) - #{$gap});
  max-height: calc( ((#{$mw}/#{$cols})/(#{$rw}/#{$rh})) - #{$gap});
}
.container {
   --ratio-w: 16;
  --ratio-h: 9;
  --max-width: 1024px;
  --cols: 1;
  --gap: 1rem;
  max-width: var(--max-width);
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.item {
  width: 100%;
  margin-bottom: calc(var(--gap)*2);
  @include ratio( var(--ratio-w), var(--ratio-h), var(--max-width), var(--cols), var(--gap));
  img,
  iframe,
  embed,
  object {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content-container { // Needed only for content blocks
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
@media all and (min-width: 480px) {
  .container {
    --cols: 2;
  }
  .item {
      width: calc((100%/var(--cols)) - var(--gap));
  }
}
@media all and (min-width: 960px) {
  .container {
    --cols: 3;
  }
}
View Compiled
const root = document.getElementById('container');
const form = document.getElementById('form');
 const rw = document.getElementById('width');
const rh = document.getElementById('height');
rw.onchange = function() {
   root.style.setProperty('--ratio-w', rw.value);
 }
rh.onchange = function() {
   root.style.setProperty('--ratio-h', rh.value);
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.