由于div的宽度而动态更改高度[重复]答案

【问题标题】：Change the height dynamically due to the width of a div [duplicate]由于div的宽度而动态更改高度[重复]
【发布时间】：2015-10-28 02:00:29
【问题描述】：

我想知道如何将高度设置为<div>，这样如果调整高度，宽度也会重新调整大小，例如如果<div> 的宽度通过用户重新调整浏览器窗口大小而减小，则高度将以相同的比例减小。

这怎么可能？

【问题讨论】：

请添加一些代码
@ketan 没有 JS 可能吗？ OP 仅请求 HTML 和 CSS 方面的帮助。
你能解决这个问题吗？有任何建议对您有帮助吗？
@scniro 是的，抱歉，因为我在工作，所以我之前不会回答这个问题。我得到了将问题标记为重复的解决方案，因此我将其标记为重复，因为它解决了我的问题。也谢谢你的回答！

标签： html css

【解决方案1】：

这是带有图像的解决方案。

HTML

<div>
  <img src="transparent-image.png" alt=""/>
</div>

CSS

  div { display: inline-block; }
  img { max-width: 100%; }

Demo

【讨论】：

你能在没有图像的情况下让它工作吗？

【解决方案2】：

我怀疑是否只能使用 css 和 html，因为窗口大小调整是动态的。我已经为演示创建了这个 sn-p，您可以根据自己的方便进行更改。希望此代码有用。

HTML

<div class="defaultDimen" id='defaultDiv'>
    Hello Default Div
</div>

CSS

.defaultDimen{
    height:30%;
    width:20%;
    border:1px solid red;
    border-radius:6px;

}

JS & jQuery

function _resizeDiv(options){
var ratio=options.ratio;
    var elem = $(options.element);
    var _getWidth = elem.width();
    var _getHeight = elem.height();

    elem.css({'width':'30%',
              'height':elem.width()*ratio})

}

$(window).resize(function(){
    var elem = document.getElementById('defaultDiv');
    _resizeDiv({
     ratio:0.5,
        element:elem
    })
})

您可以指定所需的高度和宽度的比例。 jsfiddle

【讨论】：

查看我的答案以获得 JS 免费解决方案

【解决方案3】：

有几种方法可以做到这一点。这个例子是免费的 JavaScript，但需要一个父元素。请注意以下...

<div id="container">
    <div id="element"></div>
</div>

#container {
    display: inline-block;
    position: relative;
    width: 100px;
}
#container:after {
    content: '';
    display: block;
    margin-top: 100%;
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: dodgerblue;
}

当宽度改变时，高度也一样。下面提供一个demo，使用jQuery，只是为了方便操作元素宽度。

// -- 100 x 100
$('#container').click(function() {
    $(this).width(50); // -- 50 x 50
});

JSFiddle Link - 演示

JSFiddle Link - 附加演示 - 基于% - （调整输出窗口大小以查看缩放）

此外，要获得更简短的答案，请使用vw 单位。请注意以下...

<div></div>

div {
    width:20vw;
    height:20vw;
    background-color: dodgerblue;
}

JSFiddle Link - vw 演示

Here 是关于 vw 和其他可能感兴趣的类似单位的不错的文章

【讨论】：