CSS 製作固定比例寬高區塊（Aspect Ratio / Height Based on Width）

CSS ｜ 2023-02-03

在開發響應式網站（Responsive Web Design）常會需要製作等比例寬高圖片，不管螢幕尺寸如何縮放，圖片都能保持在固定比例，做法蠻多，以下列出其中兩種做法：

aspect-ratio

Chrome 88（2021）開始支援的屬性，設置方式也很簡單，直接輸入寬高比就可以了

aspect-ratio: width / height;

缺點：aspect-ratio 屬性瀏覽器支援度較低，可以參考 can I use

如果在意瀏覽器支援度，可以使用 padding-bottom 建立外層容器

padding-bottom: 56.25%;

通常會搭配 position 定位使用，如下：

<div class="image-wrap">
    <p>some description</p>
</div>

.image-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
p {
    position: absolute;
    width: 100%;
}

範例程式碼：

參考文章：

#css