object-fit : CSS 图片自适应

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;
    }

效果展示：