Высота, равная динамической ширине (компоновка флюида CSS)

Можно ли установить ту же высоту, что и ширина (соотношение 1:1)?

Пример

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

Ответы

Ответ 1

Используя jQuery, вы можете добиться этого, выполнив

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Проверьте рабочий пример http://jsfiddle.net/n6DAu/1/

Ответ 2

[Обновление: Хотя я обнаружил этот трюк самостоятельно, Ive с тех пор узнал, что Тьерри Кобленц избил меня. Вы можете найти его статью 2009 года в List Apart. Кредит, при котором должен быть предоставлен кредит.]

Я знаю, что это старый вопрос, но я столкнулся с аналогичной проблемой, которую я действительно решал только с помощью CSS. Вот мой пост в блоге, в котором обсуждается решение. В сообщении присутствует живой пример. Код отправляется ниже.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}


#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Ответ 3

Есть способ с помощью CSS!

Если вы устанавливаете свою ширину в зависимости от родительского контейнера, вы можете установить высоту в 0 и установить padding-bottom в процентах, которые будут рассчитываться в зависимости от текущей ширины:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

Это хорошо работает во всех основных браузерах.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Ответ 4

Возможно без любого Javascript:)

В этой статье это прекрасно написано - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div>

CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

Ответ 5

Простые и neet: используйте vw единицы для чувствительной высоты/ширины в соответствии с шириной окна просмотра.

vw: 1/100th ширины окна просмотра. (Источник MDN)

DEMO

HTML:

<div></div>

CSS для соотношения сторон 1:1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

Таблица для расчета высоты в соответствии с желаемым соотношением сторон и шириной элемента.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

Этот метод позволяет вам:

  • вставить содержимое внутри элемента без использования position:absolute;
  • нет ненужной разметки HTML (только один элемент)
  • адаптировать соотношение сторон элементов в соответствии с высотой окна просмотра с помощью модулей vh
  • вы можете сделать отзывчивый квадрат или другое соотношение сторон, которое всегда вписывается в видовое окно в соответствии с высотой и шириной окна просмотра (см. этот ответ: Отзывчивый квадрат по ширине и высоте viewport или этой demo)

Эти устройства поддерживаются IE9 + см. canIuse для получения дополнительной информации

Ответ 6

Чрезвычайно простой метод jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

Ответ 7

Расширяя технику заполнения сверху/снизу, можно использовать псевдоэлемент, чтобы установить высоту элемента. Используйте плавающие и отрицательные поля, чтобы удалить псевдоэлемент из потока и просмотра.

Это позволяет вам размещать контент внутри бокса без использования дополнительного div и/или CSS-позиционирования.

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Ответ 8

На самом деле это относится к комментарию к ответу Натана, но мне не разрешено это делать...
Я хотел поддерживать соотношение сторон, даже если в коробке слишком много материала. Его пример расширяет высоту, изменяя соотношение сторон. Я нашел добавление

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

для элемента. См. http://jsfiddle.net/B8FU8/3111/