移动端经常实现图片width为100%,height始终与width等比例展示
使用padding属性可以很好的解决这个问题
在文档中可以看出,padding的值为百分比时,是基于父元素宽度来设置的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 20%;
padding-top: 20%;
background: #269acf;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
这样就可以实现随屏幕变化,宽高都是等比例缩放
但是这么写有个问题,当需求是width为固定像素值时,就失效了
宽为固定像素值时,padding参照的是body的宽
所以需要手动添加一个父元素(box1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 20%;
padding-top: 20%;
background: #269acf;
}
.box1{
/*width: 20%;*/
width: 300px;
overflow: hidden;
background: #269acf;
}
.box1 .inner{
margin-top: 100%;
/*padding-top: 100%;*/
}
</style>
<body>
<div class="box"></div>
<div>
+++++++++++++++++++++++++++++++++++++=
</div>
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>
此时无论是百分比还是像素值都可以实现宽高等比例
padding和margin也都可实现