CSS3 object-fit使用实例页面

CSS代码：

.box { width: 160px; height: 160px; margin: 10px 0 20px; background-color: #beceeb; overflow: hidden; resize: both; }
.box > img {
    width: 100%; height: 100%; background-color: #cd0000;
}
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
                

HTML代码：

<strong>object-fit: fill</strong>
<div class="box">
    <img src="mm1.jpg" class="fill">
</div>
<strong>object-fit: contain</strong>
<div class="box">
    <img src="mm1.jpg" class="contain">
</div>
<strong>object-fit: cover</strong>
<div class="box">
    <img src="mm1.jpg" class="cover">
</div>
<strong>object-fit: none</strong>
<div class="box">
    <img src="mm1.jpg" class="none">
</div>
<strong>object-fit: scale-down</strong>
<div class="box">
    <img src="mm1.jpg" class="scale-down">
</div>