根据div的宽度动态更改高度[重复]

Question

我想知道如何将高度设置为

这怎么可能？




Answer 1

有几种方法可以做到这一点。此示例是免费的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链接-演示

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

此外，对于一个简短而简单得多的答案，使用vw单位。观察以下...

<div></div>

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

vw演示

这里有一个关于vw和其他可能感兴趣的类似单元的不错的文章

Answer 2

我怀疑是否只有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

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
    })
})

可以指定高度的比率

Answer 3

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

HTML

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

CSS

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

演示