Сделайте квадрат ‹div›, когда ширина динамически изменяется в зависимости от процента

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

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

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


html css dimensions grid-layout aspect-ratio
person Nate    schedule 15.04.2010    source источник
comment
Настоящая проблема не в размере квадратов: это просто (высота / n). Проблема заключается в том, чтобы установить общую высоту сетки равной ее ширине. Это сложно, без каких-либо предположений о фиксированном размере или без использования каких-либо сценариев.   -  person graphicdivine    schedule 16.04.2010

Ответы (4)


arrow_upward
24
arrow_downward

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

$('div').height($('div').width());
person Christopher Altman    schedule 15.04.2010
comment
В то время я не знал JQuery, но как только я его узнал, это оказалось достаточно просто. Спасибо! - person Nate; 30.12.2010
comment
это не удастся, если размер страницы изменится. - person Mohammed Shareef C; 05.12.2020

arrow_upward
49
arrow_downward

Существует 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>

Такого же поведения можно добиться, изменив размер элемента в соответствии с высотой области просмотра, используя 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>

person web-tiki    schedule 13.05.2014
comment
это нормально, если вы понимаете, что vw и vh относятся к размеру области просмотра, а не к конкретному контейнеру (к сожалению) - person frumbert; 15.10.2014
comment
@frumbert Я отредактировал свой ответ решением, основанным на ширине контейнера (техника заполнения) - person web-tiki; 15.10.2014
comment
это классный хак! программисты для победы !! - person quemeful; 11.05.2016

arrow_upward
28
arrow_downward

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

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

и он останется квадратным, когда вы измените размер окна.

.

.

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

9/16= 0.56

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

9/16*0.5= 0.28 = 28%

person LeeCanvas    schedule 19.10.2014
comment
Я искал способ сделать это на чистом css, спасибо! - person aclave1; 03.03.2017
comment
Не работайте в Edge. : / jsfiddle.net/836popre/3 - person tenhobi; 15.06.2017
comment
Красивое решение, должно быть ответом. - person MarsAndBack; 07.09.2018
comment
К вашему сведению, я использовал это решение для поддержания динамического идеального круга, но мне нужно было явно установить height: 0, чтобы он вообще работал. - person MarsAndBack; 25.09.2018
comment
К сожалению, кажется, что это не работает, когда установлена ​​max-width, т.е. max-width: 200px;; - person clayRay; 01.09.2020
comment
Отличный ответ, можете ли вы объяснить, как padding-bottom делает высоту равной ширине? - person Derzu; 01.04.2021

arrow_upward
-2
arrow_downward

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

        //@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);
        }
person JackMahoney    schedule 11.12.2012
comment
Я не верю, что сохранение территории актуально. OP не хочет, чтобы элемент был квадратным в зависимости от его ширины. Изменение этой ширины - своего рода поражение цели. -1 - person Jon P; 11.12.2012