object-fit （image,video）自適應
阿新 • • 發佈：2019-01-25
- 替換元素
CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立於CSS。object, video, textarea, input也是替換元素，audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的物件是匿名替換元素。
為何需要object-position/object-fit?
適配響應式佈局
- object-fit理解
.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, 最終呈現的是尺寸比較小的那個。
- 範例
其原本的尺寸是450*302畫素，容器的尺寸是160*160, 背景色是灰藍色，同時，測試的圖片高寬設定為100%。程式碼如下：
css
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
width:302px;
height:202px;
border:1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="object-fit.css">
</head>
<body>
<div>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1526212574&di=d7da79bec27769a727d6dbc7c4668d4d&src=http://img1.cache.netease.com/catchpic/C/C7/C7F6DDD628AF0834C677072B06BBE2C8.jpg" alt="MDN Logo"
class="contain"/>
</div>
</body>
</html>效果圖：
object-fit:fill;
object-fit:contain;
object-fit:none;
object-fit:cover;(不太理解)
object-fit:scale-down;
scale-down由於具有動態特性，所以要專門展示下。實際的替換內容表現是none和contain最終尺寸小的那個屬性值的表現。
例如，假設我們的容器可以resize拉伸，改變其尺寸，則當容器尺寸比450*302小的時候，也就是容器比替換內容（這裡的圖片）實際尺寸小的時候，效果跟contain一致，因為此時contain的實際展示尺寸比none小。如下截圖示意：
但是，當容器尺寸拉伸到比圖片實際尺寸還大的時候，則效果跟none一致，因為此時none的實際展示尺寸比contain小。如下截圖：
