Установите ширину в соответствии с высотой
Я видел решение для высоты в зависимости от ширины:высота css такая же как ширина, Или здесь:https://stackoverflow.com/a/6615994/2256981, Но мой вопрос противоположен.
Моя стихия:
<body>
<div id="square"></div>
</body>
Стиль для этого:
body, html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported, preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: darkorange; /* Makes it visible. */
}
Сценарий, который держит это прямо:
window.onload = window.onresize = function (event) {
var mySquare = document.getElementById("square");
mySquare.style.width = mySquare.offsetHeight + 'px';
};
Полный код здесь:http://jsfiddle.net/je1h/hxkgfr9g/
Вопрос в том, чтобы сделать то же самое в чистом CSS. Нет сценариев.