写商品展示位时,后台给的图片大小不一定相同,因此为了使图片大小相同,需要给图片宽度和高度,这样不利于代码封装。
现在我们有一种方法,可以不需要给图片确定的数值,通过设置img的父盒子的padding值来调整图片大小,这样,当这个图片展示位一行展示3个或4个或者任何几个图片的时候,图片的大小都会自动调整而不用一个个写了。
<div class="grandpa">
<div class="father">
<img class="son"></img>
</div>
<div>你好啊,李银河</div>
</div>
<style>
.grandpa {
margin: 100px auto;
width: 400px;
height: 400px;
background-color: pink;
box-sizing: border-box;
}
.father {
background-color: yellow;
position: relative;
padding: 66% 10px 0;
}
.son {
position: absolute;
left: 0;
top: 0;
background-color: skyblue;
position: absolute;
width: 100%;
height: 100%;
}
</style>
grandpa盒子需要有宽度,而他的宽度可以是版心的25%或者其他自动设置,这里为了演示,写为400px;
father盒子的padding值有3个参数,分别是上边距,左右边距和下边距;上边距设置为66%即为grandpa盒子的66%,这样grandpa盒子的宽度变更后,father盒子的padding值会自动变更,里面宽度和高度均为father盒子100%的img盒子的宽度和高度也就会自动变更。