Изменение высоты динамически из-за ширины div

Question

Я хочу знать, как установить высоту в <div>, так что если высота будет изменена, ширина будет изменяться одинаково, например. если ширина <div> уменьшается за счет изменения размера окна браузера, высота будет уменьшена в той же пропорции.

Как это возможно?

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 Link - демонстрационная

JSFiddle Link - дополнительный демо - % основе - (окно вывода изменить размер, чтобы увидеть масштабирование)

Кроме того, в течение короткого и гораздо более простой ответ, используйте vw единицы. Обратите внимание на следующее ...

<div></div> 

---

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

JSFiddle Link - vw демо

Here порядочный рецензия на 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 & 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

Answer 3

Решение проблемы с изображением.

HTML

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

CSS

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

Demo