Это немного сложно объяснить, но: мне нужен divive-height div (height: 100%), который будет масштабировать ширину, пропорциональную высоте (не наоборот).
Я знаю этот метод, используя padding-top hack, чтобы сделать высоту пропорциональной ширине, но мне нужно, чтобы она работала с другим наоборот. Сказав это, я не очень сильно заинтересован в дополнительном требовании абсолютно позиционированных элементов для контента в этом методе, поэтому я понимаю, что, возможно, я прошу о луне на палке здесь.
Чтобы визуализировать, вот изображение:
... и вот jsFiddle, иллюстрирующий почти то же самое.
Стоит отметить, что я уже использую псевдоэлементы :before и :after для вертикального выравнивания содержимого поля, которое я хочу масштабировать пропорционально.
Мне бы очень понравилось не возвращаться к jQuery, просто потому, что будет неотъемлемое требование для обработчиков размеров и, как правило, больше отладки по всему кругу... но если это мой единственный выбор, то fiat.
Мне было интересно узнать о решении 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
}
О, возможно, вы можете использовать трюк "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 связано с шириной элемента, а не с высотой.
Для решения шрифта требуется, чтобы высота была известна. Я нашел решение для создания элемента пропорционально внутри родительского 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, например, в моей демонстрации, размеры не будут обновляться. Существует хак, который можно применить для решения этой проблемы, как показано в моей демонстрации.
Основываясь на ответе @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... в противном случае просто отрегулируйте размер шрифта до тех пор, пока он не о том, где вы хотите его видеть (и взорвите своего дизайнера в процессе).
Сделать родительский DIV вести себя как ячейка таблицы и выровнять дочерний элемент по вертикали. Не нужно делать никаких трюков.
HTML
<div class="parent">
<img src="foo.jpg" />
</div>
CSS
.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }