我想讓第一個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="https://bbs.csdn.net/topics/#">
<li><img src="https://img.uj5u.com/2021/04/22/173635220421141.jpg" /></li>
<li>圖片1</li>
</a>
<a href="https://bbs.csdn.net/topics/#">
<li><img src="https://img.uj5u.com/2021/04/22/173635220421142.jpg" /></li>
<li>圖片2</li>
</a>
<a href="https://bbs.csdn.net/topics/#">
<li><img src="https://img.uj5u.com/2021/04/22/173635220421143.jpg" /></li>
<li>圖片3</li>
</a>
</div>
uj5u.com熱心網友回復：
關于前端處理圖片正常顯示，我之前 寫過一個方法，希望對你有幫助。uj5u.com熱心網友回復：
看了你的方法，用的是JQ，純CSS有沒辦法實作？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278716.html
標籤：HTML(CSS)