CSS3 object-position使用实例页面

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

.contain { object-position: contain; }
.cover { object-position: cover; }
.none { object-position: none; }

.position {  object-position: -50% -50%; }
                

HTML代码：

<strong>object-fit:contain;<br> </strong>
<div class="box">
    <img src="mm1.jpg" class="contain">
</div>
<strong>object-fit:contain;<br>object-position: -50% -50%</strong>
<div class="box">
    <img src="mm1.jpg" class="contain position">
</div>
<strong>object-position: cover<br> </strong>
<div class="box">
    <img src="mm1.jpg" class="cover">
</div>
<strong>object-position: cover<br>object-position: -50% -50%</strong>
<div class="box">
    <img src="mm1.jpg" class="cover position">
</div>
<strong>object-position: none;<br> </strong>
<div class="box">
    <img src="mm1.jpg" class="none">
</div>
<strong>object-position: none;<br>object-position: -50% -50%</strong>
<div class="box">
    <img src="mm1.jpg" class="none position">
</div>