图片等比缩放问题

weixin_41240366 2021-04-21 10:32:36

我想让第一个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>

...全文