weixin_41240366 04月21日
图片等比缩放问题

我想让第一个li标签实现4:3等比缩放,且图片按等比剪切,当我加上height: 100%;时图片不显示了,麻烦高手指点一下要怎么改?或有没更好的方法
li{
list-style-type: none;
}
.Pic {
width: 100%;
margin-right: -1%;
margin-left: -1%;
position: relative;
overflow: hidden;
height: auto;
}
.Pic>a {
float: left;
overflow: hidden;
position: relative;
width: 31.3%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 20px;
}
.Pic>a>li:nth-of-type(1) {
overflow: hidden;
border-radius: 5px;
border: 1px solid #F0F0F0;
height: 0;
padding-bottom: 75%;
}
.Pic>a>li:nth-of-type(1)>img {
width: 100%;
height: 100%;
object-fit: cover;
float: left;
background-color: #F5F5F5;
}
.Pic>a>li:nth-of-type(1)>img:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.2);
transform: scale3d(1.1, 1.1, 1.2);
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
}
.Pic>a>li:nth-of-type(2) {
text-align: center;}


<div class="Pic"> <a href="#">
<li><img src="001.jpg" /></li>
<li>图片1</li>
</a>
<a href="#">
<li><img src="002.jpg" /></li>
<li>图片2</li>
</a>
<a href="#">
<li><img src="003.jpg" /></li>
<li>图片3</li>
</a>
</div>
...全文
371 点赞 收藏 4
写回复
4 条回复

还没有回复,快来抢沙发~

发动态
发帖子
CSS
创建于2007-09-28

3.1w+

社区成员

6.0w+

社区内容

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区公告
暂无公告