Сделайте квадрат , когда есть динамически изменяющаяся ширина на основе процента [дубликат

Question

Этот вопрос уже имеет ответ здесь:

• Поддерживать соотношение сторон Div с CSS 22 ответа

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

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

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

Answer 1

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

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

Answer 2

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

Использование VW единиц

Вы можете использовать vw единицы, чтобы сделать ваши элементы квадратными и ответственными (Устройства просмотра на MDN).
1vw = 1% of viewport width Таким образом, вы можете установить высоту элементов в соответствии с шириной просмотра.
Пример с сеткой 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>

Такое же поведение может быть достигнуто размером, элемент, прилагаемый к высоте просмотра. vh единицы.

---

Используя прокладку

Прокладки рассчитываются в соответствии с шириной контейнеров, поэтому вы можете использовать его для установки высоты блока в соответствии с его шириной.
Пример с сеткой 4x4:

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <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>
</div>

Answer 3

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

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

И это останется площадью, всякий раз, когда вы измените размер окна.

.

.

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

9/16= 0.56

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

9/16*0.5= 0.28 = 28%

Answer 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);
        }