CSS: сохранение высоты div относительно его ширины

Мой вопрос очень похож на этот вопрос: CSS: ширина или высота 100% при сохранении пропорций?

У меня есть div, положение которого фиксировано. Ширина div должна быть 100%, а высота - ровно 1/6 ее ширины. Есть ли способ -webkit-calc() сделать это?

Примечание. JS-решения не являются предпочтительными, поскольку изменение масштаба/ориентации может влиять на ширину/высоту.

Ответ 1

Это то, что вам нужно? Я вообще не использую -webkit-calc(). Я вставил изображение 1px на 6px во внешнюю div, которая применила к нему position: fixed, и установила для изображения width 100% и position: relative. Затем я добавил внутренний div, который абсолютно позиционируется так же высоко и широко, как и его предок.

Теперь вы можете изменить ширину внешнего div, а настройка изображения width: 100% гарантирует, что как внешний, так и внутренний div гарантированно будут иметь высоту, равную 1/6 их ширину (или, по крайней мере, как можно ближе к точному, как она может быть достигнута), высота будет округлена до ближайшего целого числа пикселей). Любое содержимое может находиться внутри внутреннего div.

HTML

<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>

CSS

html, body {
  margin: 0px;
  padding: 0px;
}
div {
  position: fixed;
  width: 100%;
}
div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      
}
img {
  width: 100%;
  display: block;      
  position: relative;
}

Здесь jsFiddle, показывающий запрошенное поведение.

Ответ 2

Вы также можете использовать решение, которое я описал в Ответных квадратных столбцах.

Он основан на том, что% padding-top/bottom и margin-top/bottom вычисляются в соответствии с шириной родительского элемента.

Адаптировано к вашей ситуации, это будет выглядеть так:

FIDDLE

HTML:

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS:

.wrap{
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/
}
.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

Ответ 3

вы всегда можете установить ширину div следующим образом:

$('#div1').css("width", $('#div1').height()/6);

EDIT:

или вы можете использовать что-то вроде этого:

/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);

Это только пример -.. Но невозможно получить высоту div в пикселях в файле css. Вам нужно использовать jquery для этого

EDIT:

высота 1/6 ширины

$('#div1').css("height", window.width()/6);

Ответ 4

вы можете использовать jquery, например $('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width() / 6);

перенесло второе предложение из комментария для удобочитаемости

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});