Question

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

这怎么可能？

Answer 1

这是带图像的解决方案。

HTML

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

CSS

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

Demo

Answer 2

有几种方法可以做到这一点。此示例不含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;
}

每当宽度改变时，高度也同样如此。下面提供的是一个演示，使用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及其他可能感兴趣的类似单位的体面写作

Answer 3

我怀疑是否只有css和html是可能的，因为窗口调整大小是动态的。我已经为演示创建了这个片段，你可以根据自己的想法进行更改。希望这段代码很有用。

HTML

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

CSS

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

}

JS＆amp; 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

由于div的宽度，动态更改高度

3 个答案: