Высота шкалы CSS для соответствия ширине - возможно, с помощью formfactor

Я реализовал карту GoogleMapsV3 на базовом адаптивном дизайн-сайте twitterBootstrap.

Но мой вопрос довольно прост: у меня есть:

<div id="map"></map>

а также

#map{ width: 100%; height: 200px }

Я хотел бы иметь возможность изменить высоту на форм-фактор. Как в этом "в моих снах CSS"

#map { width: 100%; height: width * 1.72 }

Я пытался не указывать высоту, настраивать на авто и всякие проценты - но только для того, чтобы div всегда падал на меня.

У меня нет проблем с написанием js-решения, но надеюсь на простое чистое решение CSS, возможно CSS3

Если это невозможно, каков был бы оптимальный способ избавиться от этого? (таймеры, события... или тому подобное)

Ответ 1

Для этого вам нужно будет использовать JavaScript или полагаться на несколько поддерживаемое CSS-выражение calc().

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

Или используя CSS calc (см. Поддержку здесь: http://caniuse.com/calc)

#map {
    width: 100%;
    height: calc(width * 1.75)
}

Ответ 2

Вот. Чистый CSS. Вам нужен один дополнительный элемент "контейнер".

Скрипка

~~(на самом деле тинкербин): http://tinkerbin.com/rQ71nWDT~~ (Тинкербин мертв.)

Решение.

Обратите внимание, что я использую 100% по всему примеру. Вы можете использовать любой процент, который хотите.

Так как процентное соотношение высоты относительно высоты родительского элемента, мы не можем полагаться на него. Мы должны полагаться на что-то еще. К счастью, отступы зависят от ширины - горизонтальной или вертикальной. В padding-xyz: 100%, 100% соответствует 100% ширины окна.

К сожалению, отступы - это просто отступы. Высота поля содержимого равна 0. Нет проблем!

Вставьте абсолютно позиционированный элемент, задайте ему ширину 100%, высоту 100% и используйте его в качестве фактического поля содержимого. Высота 100% работает, потому что процентные высоты на абсолютно позиционированных элементах относятся к отступу поля, к которому они относятся относительно.

HTML:

<div id="map_container">
  <div id="map">
  </div>
</div>

CSS:

#map_container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

Ответ 3

Вы можете попробовать использовать vw для высоты. https://developer.mozilla.org/en/docs/Web/CSS/length

Что-то вроде

div#map {
     width: 100%;
     height: 60vw;
}

Это установит ширину div на 60% ширины области просмотра. Вам, вероятно, понадобится использовать calc для настройки, чтобы учесть отступы...

Ответ 4

Мне нужно делать "флюидные" прямоугольники, а не квадраты.... так СПАСИБО JOPL.... не взяли, а минут...

#map_container {
     position: relative;
     width: 100%;
     padding-bottom: 75%;
}


#map {
    position:absolute;
    width:100%;
    height:100%;
}

Ответ 5

.video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
}

.video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

16: 9

padding-bottom = 9/16 * 100

Ответ 6

Позвольте мне описать решение JS как отдельный ответ:

function handleResize()
{
  var mapElement = document.getElementById("map");
  mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px";
}

<div id="map" onresize="handleResize()">...</div>

(или зарегистрировать прослушиватель событий динамически).

mapElement.style.width * 1.72 не будет работать, поскольку для этого требуется, чтобы ширина была явно задана элементом, либо с использованием атрибута width DOM, либо в встроенном стиле CSS width.

Ответ 7

Решение с Jquery

$(window).resize(function () {
    var width = $("#map").width();
    $("#map").height(width * 1.72);
});

Ответ 8

В JQuery

$('.img-responsive').each(function(){
        $(this).height($(this).width());
});