Изменение ширины div при изменении высоты браузера с помощью CSS

Несколько дней искал решение только для CSS для поддержания соотношения сторон div. Важная часть заключается в том, что высота div должна соответствовать высоте окна браузера (без прокрутки и без скрытия переполнения), а проценты ширины должны корректироваться, чтобы сохранить правильное соотношение сторон. Все, что я нашел до сих пор (в основном трюк с отступами), использует ширину родительского элемента для сохранения аспекта и добавляет много дополнительного пространства под div, особенно в полноэкранном режиме на больших дисплеях.

На самом деле пытаюсь избежать javascpript.

Вот моя базовая установка:

::Edit:: добавлена ​​ссылка на jsfiddle -- http://jsfiddle.net/SUbYB/ ::Edit 2:: просто используя jQuery для обработки заданной ширины div на основе высоты. Спасибо всем!

таблица стилей

body, html{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}
.super-container{
    position: relative;
    width: 69.8%;
    height: 95%;
    max-width: 2008px;
    margin: 0 auto;
    padding: 0 15.1% 0 15.1%;
    background: rgba(200,200,200,.2);
}
.aspect-container{
    position: relative;
    display: block;
    height: 95%;
    margin: 0 auto;
    background: rgba(200,200,200,.4);
}
.aspect-critical-content{
    position: absolute;
    top:0; right: 0; bottom: 0; left: 0;
    background: rgba(200,0,0,.2);
}

и HTML

<html>
<head>
</head>

<body>

<div class="super-container">
     <div class="aspect-container">

         <div class="aspect-critical-content">
         </div>

     </div>
</div>

</body>
</html>

Спасибо за любую помощь заранее!


html css responsive-design aspect-ratio
person Jeffrey_0100101001100101011001    schedule 10.11.2013    source источник
comment
Не могли бы вы предоставить скрипку или плунжер?   -  person hugo der hungrige    schedule 10.11.2013
comment
jsfiddle.net/SUbYB ссылка jsfiddle на приведенный выше код   -  person Jeffrey_0100101001100101011001    schedule 11.11.2013
comment
вы можете попробовать использовать calc, если кроссбраузерность для вас не слишком важна: developer.mozilla.org/en-US/docs/Web/CSS/   -  person hugo der hungrige    schedule 11.11.2013
comment
Я бы также рекомендовал взглянуть на мой собственный вопрос. Там был некоторый полезный ввод, хотя и не было хорошего решения: -width-of-the-window-with-p" title="как сделать гибкий квадрат подходящим по высоте или ширине окна с помощью p">stackoverflow.com/questions/15824709/   -  person hugo der hungrige    schedule 11.11.2013
comment
Единственное другое чистое решение css, о котором я могу думать, это использовать точки останова для максимальной высоты. но это, вероятно, не то, что вы хотите.   -  person hugo der hungrige    schedule 11.11.2013
comment
Спасибо Хьюго, хороший материал там. Все больше и больше похоже, что это невозможно сделать с помощью просто css   -  person Jeffrey_0100101001100101011001    schedule 11.11.2013

Ответы (2)


arrow_upward
0
arrow_downward

Как насчет использования:

display: table;
display: table-row;
display: table-cell;

В вашем случае это будет выглядеть (в дополнение к вашему коду):

.aspect-container{
    display: table-row;
}
.aspect-critical-content{
    display:table-cell;
    height:100%;
}

.aspect-container2{
    display:table-row;
    height:100px;
}

и HTML:

<div class="super-container">
  <div class="aspect-container">
    <div class="aspect-critical-content">
      some text
    </div>
  </div>
  <div class="aspect-container2">
    <div>
      text2
    </div>
  </div>
</div>

Вторую строку я добавил только для того, чтобы показать, как легко можно играть с высотой другого блока в том же контейнере.

Код на плункере.

person Agat    schedule 10.11.2013
comment
попробовал это, но контейнер аспекта (и дочерние элементы) не будет изменять размер до правильной ширины при уменьшении или увеличении высоты. - person Jeffrey_0100101001100101011001; 11.11.2013
comment
Не уверен, что понимаю, как высота связана с шириной в вашем комментарии. - person Agat; 11.11.2013
comment
В настоящее время в каждом решении, которое я пробовал, высота div будет регулироваться при изменении ширины браузера. Мне нужно настроить ширину div при изменении высоты браузера. - person Jeffrey_0100101001100101011001; 11.11.2013
comment
Извините, подстроиться под что? - person Agat; 11.11.2013
comment
... для настройки на любую длину, сохраняющую соотношение сторон, не выходя за границы окна браузера (никогда не прокручивайте). - person Jeffrey_0100101001100101011001; 11.11.2013
comment
Пример кода, который я предоставил, полностью посвящен решению проблемы высоты. Ширина (ы) обычно не имеет подобных проблем и, как правило, проста в управлении. (Я просто ожидал, что вы легко сможете это сделать с помощью чего-то вроде «width: 100%»). Если вы все еще испытываете определенные проблемы с появлением полос прокрутки, это может быть просто из-за некоторых нюансов с вашей собственной реализацией. (Убедитесь также, что ваш тег body имеет отступы: 0; поля: 0; настроены свойства). - person Agat; 11.11.2013

arrow_upward
0
arrow_downward

Вы можете использовать эту технику css:

.aspect-container {
  width: 100%;
  height: 0;
  margin: 0 auto;
  /* this is a aspect ratio of 1:3 */
  padding-top: 33.33%;
  position: relative;
}

.aspect-critical-content {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

Значение padding-top по основанию 100 — это соотношение сторон.
Fiddle: http://jsfiddle.net/mE4qG/

person hugo der hungrige    schedule 11.11.2013
comment
спасибо, но отступы и поля получают свои значения от ширины родительского элемента. Мне нужно, чтобы высота элемента окна/родителя была движущим фактором при установке размера .aspect-critical-container. Все больше и больше похоже, что это не просто решение CSS. - person Jeffrey_0100101001100101011001; 11.11.2013