/mrsekut-p/aspect-ratio - Scrapbox Reader

generated at 2/22/2025, 3:01:46 PM

aspect-ratio
アスペクト比を指定する

 aspect-ratio: <width> / <height> 


mdn



<img>の親要素に指定することが多い
 aspect-ratio の登場以前はpadding-top: 100%のような指定をしていた ref
css.image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; 
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍 | コリス