縦横比を維持したまま横幅に応じて伸び縮みするブロックの作り方です。

過去に padding-bottom を利用したレスポンシブブロックの解説記事をアップしていました。

aspect-ratio を利用するともっとシンプルに記述できます。

※ aspect-ratio が使えるブラウザは極めて直近にリリースされたものに限定されます。
CSS property: aspect-ratio | Can I use... Support tables for HTML5, CSS3, etc

HTML

<div class="wrap">
    <img src="_img/a.jpg">
</div>

CSS

.wrap {
    aspect-ratio: 4/3;
    background: #f00;
}
.wrap img {
    width: 100%;
    height: 100%;
}