Как сделать соотношение сторон HTML-элемента 1: 1?

Question

0

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

Допустим, что ваш разрешение экрана: 1920x1080 (1080p FULL HD)

Я установил ширину элемента (скажем, 15%), но по некоторым причинам я не могу установить высоту (не проблема).

Как создать div и установить его высоту на основе расчетной высоты в пикселях.

Другими словами, ширина становится равной 1920 * 0,15 = 288px. Как автоматически сделать высоту 288px?

Rik Telner 04 янв. 2014, в 01:01

Теги:

3 ответа

1

Если вы хотите установить размеры для привязанного тега, вы должны указать его display:block; или display:inline-block;

Если вы хотите, чтобы любой элемент достиг 100% высоты, вы должны установить его в position:absolute; ,

rcorrie 03 янв. 2014, в 22:15

0

Я пробовал display: block . position: absolute нельзя использовать, поскольку родительский объект является position: fixed , но спасибо за ответ.
Rik Telner 03 янв. 2014, в 23:21
0

Нет проблем, должен пригодиться в будущем, я уверен.
rcorrie 03 янв. 2014, в 23:26

1

Вам нужно будет использовать jQuery. Пример:

$('#element').height($('#element').innerwidth());

Должна установить высоту элемента к его внутренней ширине (что исключает границу и маржу).

zsaat14 03 янв. 2014, в 20:41

Я пробовал display: block . position: absolute нельзя использовать, поскольку родительский объект является position: fixed , но спасибо за ответ.
Нет проблем, должен пригодиться в будущем, я уверен.

Michał Rybak · Accepted Answer · 2014-01-03T22-04-00.000Z

Используйте padding умом:

#someElement {
    width: 15%;
    height: 0;  // this line is important! otwerwise height + padding > width
    padding-bottom: 15%;  
}

Это для 1:1, но вы можете выбрать любое соотношение, которое вы хотите.