object-fit : CSS 圖檔自适應

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

fill:                      中文釋義“填充”。預設值。替換内容拉伸填滿整個content box, 不保證保持原有的比例。

contain:             中文釋義“包含”。保持原有尺寸比例。保證替換内容尺寸一定可以在容器裡面放得下。是以，此參數可能會在容器内留下空白。

cover:                中文釋義“覆寫”。保持原有尺寸比例。保證替換内容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一緻。是以，此參數可能會讓替換内容（如圖檔）部分區域不可見。

none:                 中文釋義“無”。保持原有尺寸比例。同時保持替換内容原始尺寸大小。

scale-down:      中文釋義“降低”。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個。

HTML代碼

<div class="nav-banner">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner2">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner3">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner4">
     <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner5">
      <img src="../image/banner1.png" alt="">
</div>
           

style樣式：

/* object-fit:fill; 中文釋義“填充”。預設值。替換内容拉伸填滿整個content box, 不保證保持原有的比例。 */
    .nav-banner img{
        width: 100%;
        height: 100%;
        object-fit:fill;
    }
    /*object-fit: contain  中文釋義“包含”。保持原有尺寸比例。保證替換内容尺寸一定可以在容器裡面放得下。是以，此參數可能會在容器内留下空白。 */
    .nav-banner2 img{
        width: 100%;
        height: 100%;
        object-fit:contain;
    }

    /* object-fit: cover;  中文釋義“覆寫”。保持原有尺寸比例。保證替換内容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一緻。
                           是以，此參數可能會讓替換内容（如圖檔）部分區域不可見。 */
    .nav-banner3 img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
    /* object-fit:none; 中文釋義“無”。保持原有尺寸比例。同時保持替換内容原始尺寸大小。 */
    .nav-banner4 img{
        width: 100%;
        height: 100%;
        object-fit:none;
    }
    /* object-fit:scale-down;中文釋義“降低”。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個。 */
    .nav-banner5 img{
        width: 100%;
        height: 100%;
        object-fit:scale-down;
    }
           

效果展示：