maintain ratio with svg (hack)

maintain-ratio-with-svg.html

<style>
  .embed {
    position: relative;
  }
  
  .embed__ratio {
    display: block
  }
  
  .embed__content {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
</style>

<div class="embed">
  <svg class="embed__ratio" viewbox="0 0 4 3" display="none"></svg>
  <img class="embed__content" src="broken.jpg" alt>
</div>

simpler way of maintaining ratio without using inline styles. the svg initially has display="none" purely to hide it when no stylesheet gets loaded.