在页面展示图片中，总会遇到图片展示不符合自己想法的事情，比如固定了图片宽高，图片会变形
其实CSS提供了一个object-fit属性，object-fit: cover; 就可以解决图片变形的问题
- 介绍：
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些原素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
详见文档：菜鸟教程 object-fit属性
- 样式展示
如果使用过程中，图片显示的位置不是我们想要的，可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。
详见文档: 菜鸟教程 object-position属性
- 样式展示
到此已经结束了 ! ! !
有兴趣的可以复制下面代码尝试效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" name="viewport"/>
</head>
<style type="text/css">
.figure-list{
width: 760px;
margin: 0;
padding: 0;
}
.figure-list:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.figure-list li{
list-style: none;
float: left;
width: 200px;
margin: 0 50px 20px 0;
}
.title {
text-align: center;
font-size: 16px;
color: #000;
font-weight: bold;
margin-bottom: 20px;
white-space: nowrap;
}
.figure-list figure{
width: 200px;
}
.figure-list figure img{
width: 200px;
height: 200px;
object-fit: cover;
border: 1px solid #000;
}
</style>
<body>
<ul class="figure-list">
<li>
<figure>
<div class="title">
fill
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: fill;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
contain
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: contain;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
cover
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
none
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: none;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
scale-down
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: scale-down;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
inherit
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: inherit;">
</img>
</figure>
</li>
</ul>
<ul class="figure-list">
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: left top;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: left top;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: right top;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: right top;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: left bottom;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: left bottom;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: right bottom;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: right bottom;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: 20% 20%;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: 20% 20%;">
</img>
</figure>
</li>
<li>
<figure>
<div class="title">
object-fit: cover;
<br>
object-position: 80% 80%;
</br>
</div>
<img src="C:/Users/dell/Desktop/图片/VCG41472275753.jpg" style="object-fit: cover;object-position: 80% 80%;">
</img>
</figure>
</li>
</ul>
</body>
</html>
更多推荐
CSS —— 有了它,图片再也不会变形了！object-fit 与 object-position 属性详解
发布评论