Как сделать высоту div пропорциональной его ширине?

0

Я настроил <div> который изменяет размер, в зависимости от ширины окна браузера. Как настроить height автоматически, чтобы она соответствовала width? Другими словами, мне нужна высота, например, 50% от ширины. Мне нужно, чтобы он работал без JavaScript.

  • 0
    Вы пробовали height = 100% ?, Положите пример на jsFiddle.
  • 0
    Вы хотите, чтобы высота была такой же, как ширина? Или вы хотите пропорционально масштабировать? Ваш вопрос мне неясен. Если вы установили ширину на 100%, а не установили высоту, она должна масштабироваться динамически.
Показать ещё 5 комментариев
Теги:
layout

2 ответа

2
Лучший ответ

Здесь один взлом, который вы можете использовать: причуда с CSS заключается в том, что верхнее и нижнее paddings/margin, когда установлено в процентах, вычисляются на основе ширины родительского элемента, а не его высоты.

Итак, если вы хотите квадрат div, который, скажем, составляет 50% от ширины его родительского элемента. Чтобы сделать его квадратным, вы просто установите его нижнее дополнение на 50%.

Дело в том, что вам нужно настроить процент заполнения, основанный на ширине div. Если для ширины div установлено 75% от родительского, например, чтобы получить квадрат, вам нужно будет использовать нижнее дополнение 75%.

div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%; /* (50%*1) */
}
.landscape {
    padding-bottom: 37.5%; /* (50%*(3/4)) */
}
.portrait {
    padding-bottom: 66.6667%; /* (50%*(4/3)) */
}

Здесь сценарий доказуемости: http://jsfiddle.net/teddyrised/Vsj33/

  • 0
    Спасибо! Это сработало отлично! Все, что мне было нужно, это height: 0px; и padding-bottom: percentage%; и это сработало!
1

Если вы знаете соотношение вашего изображения, то вам может быть нелегко сохранить одинаковое соотношение для вашего div.

DEMO (ширина окна rezise)

Как это работает?

  1. Вставьте плавающий псевдоэлемент внутри ящика
  2. установите его вертикальное заполнение в процентах. Этот% будет принимать ширину поля в качестве ссылки.

Таким образом, вертикальная набивка на 100% растянет коробку до квадрата. Он будет расти дольше, если внутри контента недостаточно места :)

  • 0
    Это работает, так как соотношение является фиксированным.
  • 0
    идеально подходит для вас. наслаждаться :)
Показать ещё 2 комментария
Сообщество Overcoder
Наверх
Меню