markdown CSSで16：9のアスペクト比を保持する方法

Posted 2021-05-06

[https://codepen.io/sowork/pen/OQWKoL](https://codepen.io/sowork/pen/OQWKoL)

```html
<div class="wrapper">
  <div class="img">
    <div class="img-item"></div>
  </div>
</div>
```

```css
.wrapper {
  width: 300px;
}

.img {
  position: relative;
  padding-top: calc(9 / 16 * 100%);    
}

.img-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: red;  
}
```