图片宽度自适应

1、使用padding

padding和margin一般是相对于其包裹元素的宽度定义的，可以使用包裹元素的padding属性占据一部分位置，然后让图片相对于包裹元素绝对定位并填充这些位置。这样也同时避免了图片加载过程中图片从无到有时页面的闪烁；

下例实现了宽高自适应

<div class="wrapper">
    <img src="1.jpg" alt="pic">
</div>

.wrapper {
    padding: 50% 0 0;
    position: relative;
}
.wrapper > img {
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0; 
    top: 0;
}

为了在缩放过程中保持图像的宽高比，设置padding值时应当将宽高比换算到其中。比如我用的图片是533*300，那么设置padding-bottom时可以将其设置为56.3%（300/533）,这样可以不至于造成宽高比变化引起的图像失真；设置padding-bottom其实就是在图片width为100%的条件下设置其高度值，padding-bottom就是其相对高度值；

.imgWrapper {
    position: relative;
    padding-bottom: 56.3%;
}
.imgWrapper > img {
    position:  absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

---

2、使用flex布局
使用flex结合宽度百分百实现图片宽度自适应同时保持宽高比；

.wrapper {
    display:  flex;
}
.wrapper > img {
    flex: auto;
    width: 100%;
    height: 100%;
}

其中flex是flex-grow、flex-shrink和flex-basis三个描述项目属性的缩写，表示项目会随着空间大小自动放大缩小。而同时设置了宽度和高度为100%，则水平方向放大缩小时，垂直方向也会随着放大缩小，并保持相应的宽高比；
如果去掉height：100%，那么无论如何缩放，图片的高度均会保持为图片本身的高度；

---

待完善。。。