Высота, равная динамической ширине (CSS fluid layout) [дубликат]

этот вопрос уже есть ответ здесь:

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

пример

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

в CSS

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

9 ответов


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

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

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


[Update: хотя я обнаружил этот трюк самостоятельно, я с тех пор узнал, что И Thierry Koblentz опереди меня. Вы можете найти его статья 2009 в списке отдельно. Кредит, где кредит должен.]

Я знаю, это старый вопрос, но я столкнулся с подобной проблемой, что я сделал решить только с помощью 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>

существует способ использования CSS!

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

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

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

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


это возможно без какого-либо 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%;
}

простой и neet: использовать vw блоки для отзывчивых высоты / ширины согласно ширине viewport.

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

демо

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 согласно высота и ширина окна просмотра (см. Этот ответ:отзывчивый квадрат в зависимости от ширины и высоты окна просмотра или это демо)

эти блоки поддержаны IE9 + видят canIuse для получения дополнительной информации


очень простой способ jsfiddle

HTML-код

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

в CSS

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

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

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

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

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}
<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>

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

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

на .элемент помог. См.http://jsfiddle.net/B8FU8/3111/


ширина: 80vmin; высота: 80vmin;

CSS делает 80% наименьшего вида, высоты или ширины

http://caniuse.com/#feat=viewport-units