Могу ли я установить высоту div на основе процентной ширины?

Ответ 1

Это может быть сделано с помощью хака CSS (см. Другие ответы), но это также может быть сделано очень легко с помощью JavaScript.

Установите ширину div (например) 50%, используйте JavaScript, чтобы проверить его ширину, а затем установите высоту соответственно. Вот пример кода с использованием jQuery:

$(function() {
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
});

#dynamicheight
{
    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

Ответ 2

Это можно сделать только с помощью CSS, но контент внутри div должен быть абсолютно позиционирован. Ключ состоит в том, чтобы использовать отступы в процентах и ​​атрибут box-sizing: border-box CSS:

div {
  border: 1px solid red;
  width: 40%;
  padding: 40%;
  box-sizing: border-box;
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: 0;
}

<div>
  <p>Some unnecessary content.</p>
</div>

Ответ 3

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

Чтобы это сработало, я думаю, вам нужно определить отступ к ex. Вверх? например:

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding-top: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

anyways, thats, как я получил его на работу, так как с просто заполнением всех arround это не будет квадрат.

Ответ 4

Я сделал подход CSS к этому, размер которого зависит от ширины видового экрана, но максимальный размер составляет 100% от высоты видового экрана. Это не требует box-sizing:border-box. Если псевдоэлемент не может быть использован, псевдокодекс CSS может быть применен к ребенку. Демо

.container {
  position: relative;
  max-width:100vh;
  max-height:100%;
  margin:0 auto;
  overflow: hidden;
}
.container:before {
  content: "";
  display: block;
  margin-top: 100%;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

Таблица поддержки для единиц видового экрана

Я писал об этом подходе и других в статье CSS-Tricks о масштабировании гибких анимаций, которые вы должны проверить.