使用CSS让元素尺寸缩小时保持宽高比例一致

最新推荐文章于 2024-06-25 00:02:13 发布

weixin_33965305

最新推荐文章于 2024-06-25 00:02:13 发布

阅读量720

点赞数

原文链接：http://www.cnblogs.com/momo798/p/9555506.html

版权

CSS中有一个属性padding对元素宽度存在依存关系。如果一个元素的 padding属性以百分比形式表示，padding 的大小是以该元素自身宽度为参照的。

若想要元素尺寸变化时，宽高比例不变，可以将height 设为0，padding 撑开盒子高度，达到宽高比例不变的效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
html,body{
    background: #0a265e;
    height: 100%;
}
.box{
    width: 80%;
    height: 500px;
    background: red;
}
.children{
    width: 80%;
    height: 0;
    padding-bottom: 30%;
    background-color: #008b57;
}
</style>    
</head>
<body>
<div class="box">
    <div class="children"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/momo798/p/9555506.html