kimizuka https://blog.hatena.ne.jp/kimizuka/ みかづきブログ・カスタム https://blog.kimizuka.org/ CSS これまで、アスペクト比を固定しつつサイズ可変のDOMをつくる際は、before要素のpadding-topを使ってました。 DEMO ソースコード（抜粋） SCSS div { width: 50%; background: red; &:before { display: block; padding-top: calc(100% * 9 / 16); content: ''; } } paddingを相対的に指定した場合は、親要素の幅に対する割合になるため、この書き方で親要素に対し、幅半分の16:9のDOMを作ることができます。しかし、最近何気なく developer.mozilla.or… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.kimizuka.org%2Fentry%2F2023%2F01%2F26%2F003126" title="CSSのaspect-ratioを使ってDOMの縦横比を指定する 📺 - みかづきブログ・カスタム" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kimizuka/20230126/20230126003113.png Hatena Blog https://hatena.blog 2023-01-26 00:31:26 rich https://blog.kimizuka.org/entry/2023/01/26/003126 1.0 100%