CSS3 object-fit理解 以及object-fit的兼容性,包括兼容IE9+瀏覽器

本文還是着重講下object-fit:cover,特別是關於object-fit:cover的兼容性問題,如何去兼容更多瀏覽器。具體的object-fit:cover用法請看《object-fit:cover 剪裁圖片尺寸適配div - 居中並裁剪圖片

下面簡單講述下object-fit的含義以及如何提高兼容性,比如兼容IE!

object-fit理解

CSS3 background-size出現的比較早,大家應該知道其支持的一些值,除了數值之外,其還支持幾個關鍵字,例如:covercontain等。

object-fit也是類似的,但還是有些差異,具體有5個值:

.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, 最終呈現的是尺寸比較小的那個。

假設我們使用的原始圖片是:
CSS3 object-fit理解 以及object-fit的兼容性,包括兼容IE9+瀏覽器 CSS學習 第1張

容器的尺寸是160*160, 背景色是灰藍色,同時,測試的圖片高寬設置爲100%, 如下CSS代碼:

.box { width: 160px; height: 160px; background-color: #beceeb; }
.box > img { width: 100%; height: 100%; }

結果,各個屬性值的表現如下截圖:
CSS3 object-fit理解 以及object-fit的兼容性,包括兼容IE9+瀏覽器 CSS學習 第2張

大家可以對照示意感受下,什麼是內容拉伸(fill),什麼是內容全部都顯示(contain),什麼是容器沒有留白(cover),什麼是該多大就多大(none)。

object-fit兼容性

首先,看下object-fit目前兼容的瀏覽器,IE是完全不支持啊,怎麼搞到object-fit去兼容至少IE9呢!

CSS3 object-fit理解 以及object-fit的兼容性,包括兼容IE9+瀏覽器 CSS學習 第3張對於IE全部不兼容,那麼總有辦法吧? 下面介紹一個方法,使用CSS+JS的方法去兼容IE9+!

下面看一個案例:(可以支持IE9+)

Markup
<!doctype html><html><head><meta charset="utf-8"><title>CSS3 object-fit理解 以及object-fit的兼容性,包括兼容IE9+瀏覽器</title></head><body>
<style>
 .box { width: 160px; height: 160px; margin: 10px 0 20px; background-color: #beceeb; overflow: hidden; resize: both; }
 .box img {width: 160px; height: 160px; background-color: #cd0000;overflow: hidden;
  object-fit:cover; 
}
</style>
<link rel="stylesheet" href="object-fit-master/dist/polyfill.object-fit.css">
<strong>object-fit: cover</strong>
<div class="box">
    <img src="我的支付寶.jpg">
</div>
<!--兼容JS文件-->
<script src="object-fit-master/dist/polyfill.object-fit.js"></script>
 <script>
  // Call polyfill to fit in images
  document.addEventListener('DOMContentLoaded', function () {
   objectFit.polyfill({
    selector: 'img',
    fittype: 'cover'
   });
  });
 </script>
<!--//兼容JS-->
</body>
</html>

其中的CSS和JS文件,打包放在這裏!

下載:dist.zip

使用CSS+JS去兼容IE9+測試成功!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章