Как делать квадрат responsivo с максимальной шириной?

Я хочу создать одну div которому придали квадратную форму и responsivo, а именно, что, если меняется размер экрана (или если он меняет устройство, с которым веб-страница) квадрат рос / уменьшался пропорционально, но всегда с формой квадрата.

Для этого у меня есть следующий код с padding-top:

.cuadrado {
  width:25%;
  height:0;
  padding-top:25%;
  position:relative;
  background:red;
}
<div class="cuadrado"></div>

Это функционирует без проблем до тех пор, пока я не пробую ограничивать размер квадрата с одним max-width, тогда ширина ограничивается, но не padding-top то, что способствует тому, чтобы фигура прекратила быть квадратом и перешла к тому, чтобы быть прямоугольником на больших экранах:

.cuadrado {
  width:25%;
  max-width:100px;
  height:0;
  padding-top:25%;
  position:relative;
  background:red;
}
<div class="cuadrado"></div>

Как я могу менять код для того, чтобы фигуре придали квадратную форму всегда? Он был бы должен фокусировать это по-другому вместо используя padding-top (что кажется небольшим количеством hacky)?

3
задан 22.01.2017, 18:02
0 ответов

Используя vh он остался бы всегда квадратным

.cuadrado {
  width:25vh;
  max-width:100px;
  height:25vh;
  max-height:100px;
  position:relative;
  background:red;
}
<div class="cuadrado"></div>
2
ответ дан 03.12.2019, 17:34
  • 1
    @AlvaroMontoro функционируй в snipet, всегда останься квадратным –  23.01.2017, 16:39
  • 2
    Сейчас sí. Спасибо за терпение –  23.01.2017, 16:40
  • 3
    @AlvaroMontoro, но это не достаточное, подходящее для того, в чем ты нуждаешься? –  23.01.2017, 21:57
  • 4
    Sí в самом деле он приспосабливается лучше к тому, в чем я нуждаюсь, потому что só я это должен менять CSS и ее не располагает в порядке HTML –  23.01.2017, 22:17

.square {
  border-style:solid;
  border-width:2px;
  border-color:red;
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="square">
  <div class="content">
    Hello!
  </div>
</div>

Протестируй это так

1
ответ дан 03.12.2019, 17:34

Ты попытался с:

.cuadrado {
  width:25%;
  height:auto;
  padding-top:25%;
  position:relative;
  background-color:red;
  margin: 0 auto;
}

В существо height: автомобиль, он приспосабливается автоматически к width.

0
ответ дан 03.12.2019, 17:34
  • 1
    Этот có я говорю, что у него есть та же проблема как только он помещает себе max-width (пример: jsfiddle.net/2cjozj50 ) –  23.01.2017, 04:08