Сделайте квадрат <div> при динамически меняющейся ширине, основанной на процентах

Я работаю над веб-приложением, которое будет генерировать сетку NxN на основе пользовательского выбора N. Я хочу, чтобы общая ширина сетки была относительной (т.е. 100% доступного пространства), чтобы пользователи могли печатать на различные размеры бумаги.

Я могу легко вычислить ширину квадратов в сетке на% (т.е. 100%/N), но у меня возникают проблемы с вычислением высоты. Высота веб-страницы всегда будет бесконечной, если я не искусственно ограничиваю ее, что, как я уже сказал, я не хочу делать.

Как я могу сделать квадраты в моей сетке квадратными по сравнению с прямоугольными, когда ограничения ширины и ширины моей сетки являются динамическими, а не квадратными?

Ответы

Ответ 1

Это не проверено, я не знаю, как это сделать только в CSS, я бы использовал jQuery.

$('div').height($('div').width());

Ответ 2

Существует два основных метода поддержания соотношения сторон адаптивного элемента с использованием блоков padding и vw:
(полное решение для адаптивной сетки квадратов вы можете увидеть в этом ответе)

Использование блоков VW

Вы можете использовать vw единицы, чтобы сделать ваши элементы квадратными и отзывчивыми (единицы просмотра в MDN).
1vw = 1% of viewport width, чтобы вы могли установить высоту элементов в соответствии с шириной области просмотра (или высотой с помощью единиц vh).
Пример с сеткой 4x4:

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Ответ 3

Чтобы сделать div, квадрат довольно легко с CSS. Вы устанавливаете ширину, допустим, 50%. Затем вы добавляете нижнюю дозу того же значения:

div {
width: 50%;
padding-bottom: 50%;
}

и он будет оставаться квадратным при каждом изменении размера окна.

Вы можете сделать это с любым соотношением сторон, которое вы хотите, если вы хотите, чтобы ящик был равен 16: 9, вы вычисляете:

9/16 = 0,56

который затем умножается на ширину вашего элемента (в этом случае 50% (= 0,5)), поэтому:

9/16 * 0,5 = 0,28 = 28%

Ответ 4

Вышеупомянутое решение не сохраняет область - это лучше

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }