CSS: сделать ширину div пропорциональной высоте

Это немного сложно объяснить, но: мне нужен divive-height div (height: 100%), который будет масштабировать ширину, пропорциональную высоте (не наоборот).

Я знаю этот метод, используя padding-top hack, чтобы сделать высоту пропорциональной ширине, но мне нужно, чтобы она работала с другим наоборот. Сказав это, я не очень сильно заинтересован в дополнительном требовании абсолютно позиционированных элементов для контента в этом методе, поэтому я понимаю, что, возможно, я прошу о луне на палке здесь.

Чтобы визуализировать, вот изображение:

... и вот jsFiddle, иллюстрирующий почти то же самое.

Стоит отметить, что я уже использую псевдоэлементы :before и :after для вертикального выравнивания содержимого поля, которое я хочу масштабировать пропорционально.

Мне бы очень понравилось не возвращаться к jQuery, просто потому, что будет неотъемлемое требование для обработчиков размеров и, как правило, больше отладки по всему кругу... но если это мой единственный выбор, то fiat.

Ответ 1

Мне было интересно узнать о решении cc-css для решения этой проблемы. Я наконец придумал решение с использованием ems, которое можно постепенно увеличить с помощью vws:

См. ссылку на код для полной рабочей демонстрации и объяснения:

http://codepen.io/patrickkunka/pen/yxugb

Упрощенная версия:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Ответ 2

О, возможно, вы можете использовать трюк "padding-top".

width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Или:

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

Вертикальное заполнение в CSS связано с шириной элемента, а не с высотой.

Ответ 3

Для решения шрифта требуется, чтобы высота была известна. Я нашел решение для создания элемента пропорционально внутри родительского div с неизвестными ширинами и высотами. Вот демонстрация.

Трюк, который я использую, - это изображение, используемое в качестве разделителя. Код объяснил:

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

Так что это не самый красивый с двумя дополнительными div и бесполезным изображением. Но это может быть хуже. Элемент изображения должен иметь ширину и высоту с требуемыми размерами. Ширина и высота должны быть максимально допустимыми (функция!).

Css:

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

Этот элемент предназначен для ограничения высоты, но для расширения по горизонтали (width: auto), хотя никогда не выше родительского (max-width). Переполнение должно быть скрыто, потому что некоторые дети будут выступать вне div.

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

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

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

Этот элемент необходим для заполнения пространства абсолютно позиционируемым контейнером.

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

И здесь наш пропорциональный элемент получает высоту, пропорциональную ширине, со знакомым трюком с подкладкой.

К сожалению, в Chrome и IE есть ошибка, поэтому, если вы измените родительский элемент с помощью Javascript, например, в моей демонстрации, размеры не будут обновляться. Существует хак, который можно применить для решения этой проблемы, как показано в моей демонстрации.

Ответ 4

Основываясь на ответе @kunkalabs (который действительно умный), я придумал решение, которое позволяет сохранить унаследованный размер шрифта.

HTML:

<div id='rect'>
    <div id='content'>Text</div>
</div>

CSS:

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

В основном размер шрифта #content равен (100/$rectFontSize) * 100 процентов прямоугольника. Если вам нужен определенный размер пикселя для прямоугольника, вы можете установить размер шрифта #rect parent font size... в противном случае просто отрегулируйте размер шрифта до тех пор, пока он не о том, где вы хотите его видеть (и взорвите своего дизайнера в процессе).

Ответ 5

Сделать родительский DIV вести себя как ячейка таблицы и выровнять дочерний элемент по вертикали. Не нужно делать никаких трюков.

HTML

<div class="parent">
<img src="foo.jpg" />
</div>

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }