CSS - fixed ratio based on width

by PhilQ

HTML

<div>
<img width="500" src="https://4al52k24l8r51wpym5i46ltd-wpengine.netdna-ssl.com/wp-content/uploads/sites/2/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
</div>

<div>
<img src="https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/1-bengal-cat-portrait-nailia-schwarz.jpg" alt="">
</div>

SCSS

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  position: relative;
  display: inline-block;
  width: 200px;
  background: blue;
  white-space: nowrap;
  vertical-align: middle;
}

div img {
  float: left;
  width: 100%;
  height: auto;
}

div::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.2);
  width: 100%;
  height: auto;
  padding-bottom: 100%; // relative to width, keeping the aspect ratio
}