JSFiddle - React, Tailwind, and code Playground

by Just a Student

HTML

<div class="container">
  <div class="block" style="--desktop-ratio: 56.25%; --mobile-ratio: 200%;";>
  My aspect ratio is set via custom properties. It is <span class="mobile">1:2</span><span class="desktop">16:9</span>.
  </div>
</div>

CSS

.container {
  width: 200px;
}

.block {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  padding: 10px;
  padding-bottom: var(--desktop-ratio);
  background: #bada55;
  color: #444;
}

@media (min-width: 540px) {
  .mobile {
    display: none;
  }
}

@media (max-width: 539px) {
  .desktop {
    display: none;
  }
  
  .block {
    padding-bottom: var(--mobile-ratio);
  }
}