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>
                

效果:

object-fit: fill
object-fit: contain
object-fit: cover
object-fit: none
object-fit: scale-down
原始图片