1.轮播图图片变形问题
同样的图片 同样的二倍图 在安卓和苹果6等手机 图片正常显示 但是 在8p上 图片发生压缩变形 原因因为宽高比不一样 所以 图片所在区域高度固定的时候 在8P上就会压缩变形 解决方案如下 :
给父元素设置指定高度并设置相对定位 让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中:
给子元素设置绝对定位 并设置宽度为100% top left 各50% 再进行2D转换 translate(x,y)
<style type="text/css">
div{
width: 210px;
height: 210px;
overflow: hidden;
border: 2px solid red;
position: relative;
}
img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div>
<img src="1.png">
</div>
<br>
<div>
<img src="1.jpg">
</div>
transform: none|transform-functions; 具体转换效果如下 :
值 |
---|