object-fit属性值效果实例页面
展示
object-fit:fill
![](/images/common/l/1.jpg)
object-fit:contain
![](/images/common/l/1.jpg)
object-fit:cover
![](/images/common/l/1.jpg)
object-fit:none
![](/images/common/l/1.jpg)
object-fit:scale-down(图片尺寸足够)
![](/images/common/l/1.jpg)
object-fit:scale-down(图片尺寸小)
![](/images/common/s/1.jpg)
代码
-
HTML:
<h4>object-fit:fill</h4> <img src="1.jpg"> <h4>object-fit:contain</h4> <img class="contain" src="1.jpg"> <h4>object-fit:cover</h4> <img class="cover" src="1.jpg"> <h4>object-fit:none</h4> <img class="none" src="1.jpg"> <h4>object-fit:scale-down(图片尺寸足够)</h4> <img class="scale-down" src="1.jpg"> <h4>object-fit:scale-down(图片尺寸小)</h4> <img class="scale-down" src="s/1.jpg">
-
CSS:
img { width: 200px; height: 200px; padding: 20px; border: 20px solid rgba(20, 30, 255, .5); } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }