移动端遇到大小适配的问题

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;     具体转换效果如下 ：

值