Масштабирование высоты divs на чистом CSS

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

.scale1 div {
    padding-bottom: 166.667%;
}

.scale2 div {
    padding-bottom: 100%;
}

.scale3 div {
    padding-bottom: 150%;
}

.scale4 div {
    padding-bottom: 120%;
}

.scale5 div {
    padding-bottom: 50%;
}

См. Скрипку здесь: https://jsfiddle.net/teddyrised/80pk066L/9/

Однако, если вы хотите, чтобы содержимое каждого элемента было заключено в абсолютно позиционированный дочерний элемент - это потому, что, если они не будут удалены из потока документов, высота содержимого будет добавлена ​​к нижнему отступу, что приведет к искажению соотношение сторон:

li div {
    position: relative;
}
li div span {
    position: absolute;
    padding: 10px;
    top: 0; 
    left: 0;
    bottom: 0;
    right: 0;
}

https://jsfiddle.net/teddyrised/80pk066L/10/

Если использование CSS для задания соотношения сторон слишком утомительно, вы можете сделать это программно с помощью JS. Я понимаю, что вы, возможно, не захотите достичь этого с помощью JS, но это может быть более эффективным, если у вас есть большое количество элементов, которые вы хотите пройти. Для удобства я использую jQuery, но любые другие библиотеки или даже необработанный JS будут работать, если применяется та же логика:

$(function() {
    $('ul li').each(function() {
        $(this).children('div').css('padding-bottom', $(this).width()/parseFloat($(this).data('aspect-ratio')));
    });
});

Я решил сохранить соотношение сторон (в форме ширины к высоте) в атрибуте HTML5 data-:

<ul>
    <li class="scale1" data-aspect-ratio="0.6"><div><span>1</span></div></li>
    <li class="scale2" data-aspect-ratio="1"><div><span>2</span></div></li>
    <li class="scale3" data-aspect-ratio="0.667"><div><span>3</span></div></li>
    <li class="scale4" data-aspect-ratio="0.833"><div><span>4</span></div></li>
    <li class="scale5" data-aspect-ratio="2"><div><span>5</span></div></li>
</ul>

См. Пример проверки концепции здесь: https://jsfiddle.net/teddyrised/80pk066L/11/ < / а>

Вместо того, чтобы указывать точную ширину и высоту для разделов, используйте комбинацию max-width и padding-bottom для достижения этой цели. Я также взял на себя смелость преобразовать ваш макет с использования float на использование flexbox, чтобы избавиться от хлопот, связанных с очисткой float.

*{box-sizing:border-box;}
ul{
    display:flex;
    flex-flow:row wrap;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}
li{
    background:green;
	flex:1 1 calc(33.333% - 20px);
    margin:10px;
    display:block;
    max-width:calc(33.333% - 20px);
}
div{
    background:red;
}
.scale1 div{
    padding:0 0 166.667%;
    max-width:300px;
}

.scale2 div{
    padding:0 0 100%;
    max-width:400px;
}

.scale3 div{
    padding:0 0 150%;
    max-width:200px;
}
.scale4 div{
    padding:0 0 120%;
    max-width:50px;
}
.scale5 div{
    padding:0 0 50%;
    max-width:150px;
}

<ul>
    <li class="scale1"><div></div></li>
    <li class="scale2"><div></div></li>
    <li class="scale3"><div></div></li>
    <li class="scale4"><div></div></li>
    <li class="scale5"><div></div></li>
</ul>

Вы можете добиться этого, используя заполнители изображений: (скрипка, если фрагмент кода не работает)

ul {
    width: 300px;
}
li {
    float: left;
    background: red;
    margin: 10px;
    list-style: none;
    display: block;
    position:relative;
    width:100px;
}
li img {
    position: relative;
    visibility: hidden; /* make sure it's hidden */
    width: 100%;
    min-width: 100%;
}
li div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
}
/*.scale1 div {
    width: 300px;
    height: 500px;
}
.scale2 div {
    width: 400px;
    height: 400px;
}
.scale3 div {
    width: 200px;
    height: 300px;
}
.scale4 div {
    width: 50px;
    height: 60px;
}
.scale5 div {
    width: 150px;
    height: 75px;
}*/

<ul>
    <li class="scale1">
        <div></div>
        <img src="http://placehold.it/300x500" alt="" />
    </li>
    <li class="scale2">
        <div></div>
        <img src="http://placehold.it/400x400" alt="" />
    </li>
    <li class="scale3">
        <div></div>
        <img src="http://placehold.it/200x300" alt="" />
    </li>
    <li class="scale4">
        <div></div>
        <img src="http://placehold.it/50x60" alt="" />
    </li>
    <li class="scale5">
        <div></div>
        <img src="http://placehold.it/150x75" alt="" />
    </li>
</ul>
<!-- - The divs should scale - The width of the div should be max 100px - The height should scale to what fit max 100px width - Remove li height and width. They are just for decoration -->