如何保持图片的高宽比

bug： 轮播图在较差网络情况下，渲染的过程会出现闪屏的现象

原因： 图片尚未加载，屏幕上的位置可能会被轮播图后面的dom元素填充，当轮播图加载出来之后，又会把下面的内容”挤“下去

解决方法：给轮播图增加一个父级，固定父级的位置，这样就能正常渲染

那么，如何设定父级的宽高呢？

根据图片的宽、高来设置父级元素的宽高

如何设置？？？

首先，获取图片宽、高： 当前例子：宽：750px；高：200px；

 

然后给父级设置样式： 高/宽 200/750 = 26.7%

等价于

.wrapper {
     width: 100%;
      height: 26.7vw;
}

考虑到不同浏览器兼容问题，还是优先考虑以下代码：

.wrapper {
    // 保持高宽比始终26.7%
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 26.7%;
    background: #eee;

    .swiper-img {
        width: 100%;
    }
}

 

转载于:https://www.cnblogs.com/shengnan-2017/p/9259275.html