图片不变形的自适应css布局
2018-07-17 本文已影响395人
klmhly
对于有些图片宽度和高度的比值不是1：1的，在移动端布局，往往不能直接指定其大小，如果要其不变形,需要使用padding-bottom来占位。
首先要理解一下关键点：
- 对于width，padding-bottom等属性如果写成%比的话，参照的是父容器的宽度计算**
- 其次要给图片包裹一个占位容器
1. html布局如下
<div class="contain">
<div class="wrapper">
<img class="wrapper-img" src="./img/1.png" alt="">
</div>
<div class="wrapper">
<img class="wrapper-img" src="./img/2.png" alt="">
</div>
<div class="wrapper">
<img class="wrapper-img" src="./img/3.png" alt="">
</div>
</div>
2. 想要的效果如下
当最外层宽度是500px
image.png
当最外层宽度是1000px
image.png
图片随着容器放大或缩小，不会变形
3. Css代码
<style>
.contain{
width:1000px;
}
.wrapper{
float: left;
overflow: hidden;
width: 33.33%;
height: 0;
padding-bottom: 14.55%;
}
.wrapper-img{
width: 100%;
}
</style>
其中要注意的是.wrapper下面的三个属性width和hieght和padding-bottom的计算。
width：要根据布局来定，假如一行要放三个图片，则其就是1/3=33.33%
height: 要设置为0，然后真正的height由图片自然的撑开
padding-bottom：这个值需要计算，这个值也是父容器中用来给图片高度占位的值
可以根据width以及图片的高和宽比值来计算padding-bottom
IMG_20180717_144922.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue_travel</title>
</head>
<body>
</body>
</html>
