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

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

既：width:20%

css3

阅读 19.9k

4 个回答

hiYoHoo

✓ 已被采纳

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

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

发布于
2015-05-24

更新于
2015-05-25

加个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>

查看全部 4 个回答

推荐问题

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

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

css3如何实现这样的渐变背景?

请问前端小票打印各位是怎么做的？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

background简写能否缺省background-position?

如何在CSS中创建弧形线段（如图）？

css 中使用行内样式套行内样式，换行后，第一个字符没有定位？