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%,那么无论如何缩放,图片的高度均会保持为图片本身的高度;
待完善。。。