首页分享CSS3正文
图片不变形的自适应css布局
日期:2020-8-12 9:36:54 人气:74
首先要理解一下关键点:
对于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
当最外层宽度是1000px
图片随着容器放大或缩小,不会变形
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
个人理解:图片的高除宽=padding-bootm除宽 也就是图片高乘父级宽除图片宽=padding-bootm
感谢:klmhly