今日组员在调节图片自适应时遇到一个问题前来问我,就是无论什么比例的图片都要显示在固定容器里(图片的宽高一定会比容器大),不变形,说白了就是高度铺满,宽度居中显示,这个需求其实很简单,最大的知识点就是元素绝对居中的问题,下面给出解决方案:
<ul>
<li><img src="../../assets/a1.png"></li>
<li><img src="../../assets/a2.png"></li>
</ul>
li{
width: 164px;
height:246px;
border: 1px solid #e2e9f3;
position:relative;
overflow:hidden;
img{
position: absolute;
top:0;
left:50%;
height:100%;
transform:translateX(-50%);
}
}