问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？

头像
qq20739111
    722812

    请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例一致，宽度是根据父元素宽度变化的，

    既：width:20%

    css3
    阅读 19.9k
    4 个回答
    得票最新
    头像
    hiYoHoo
      2.2k31118
      ✓ 已被采纳

      骚年，数月之前吾曾于某高山僻壤处寻得一奇淫技巧可与尔一观。然而这样的技巧并没有什么卵用，切记切记！

      html:


<div class = "father">
    <div class = "daughter"></div>    // 父女情深
</div>



css:
.father {
    width: 70%;
}
.daughter {
    width: 90%; height: 0;
    padding-top: 60%;
    background: black;
}

      这样的技巧仅仅让人对某个知识点有一些深刻的认识，这里是想让人了解到：上下边距的百分比数值是以父元素宽度作为参照的。
      要想实现你题目中的条件，用js，简单得很。不必费尽周章绞尽脑汁非要用css实现。

      头像
      拾指相扣
        3.3k2417

        加个jsbin
        http://jsbin.com/kufuwaxiji/1/edit?html,output

        宽高保持不变，你参考下，内容要绝对定位

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css_square</title>
    <style>
    .main {
        width: 600px;
    }
    .rect1 {
        position: relative;
        width: 50%;
        background: #f30;
        padding-bottom: 50%;
    }
    .rect1 > .inner,
    .rect2 > .inner {
        padding: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: #0ac;
        -webkit-transform: translate(-50%, -50%);
    }
    .rect2 > .inner {
        background-color: #0cc;
    }
    .rect2 {
        position: relative;
        width: 50%;
        background: #f30;
    }
    .rect2:before {
        content: "";
        display: block;
        padding-top: 100%;
        width: 100%;
        background: #08c;
    }
    </style>
</head>
<body>
<input type="range" min="1" max="300" id="range">
<hr>
纯CSS实现正方形布局
<hr>
<div class="main">
    <div class="rect1">
        <div class="inner"></div>
    </div>
    <hr>
    <div class="rect2">
        <div class="inner"></div>
    </div>
</div>
<script>
document.querySelector('#range').addEventListener('change', function(e) {
    document.querySelector('.main').style.width = 600 + this.value/1 + 'px'
})
</script>
</body>
</html>
        头像
        zonxin
          12.1k2632

          JS实现吧
          标准CSS实现不了。

          如果确实需要，神奇的IE6还是可以实现的。

          头像
          MrChen
            353

            你可以使用rem单位 来对高度进行控制, 1rem = 根元素html的font-size，通过js 监听 load 和 resize 事件，当事件触发时,用js取得窗口宽度，并且 设置html的font-size属性 = 窗口宽度/n(比例)，然后高度和字体大小都用rem就行，我一般比例设为10,也就是1rem = 窗口宽度/10，这样当高度=1rem 时，窗口大小不管怎么变，高度也会自行跟着调整

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏