web-dev-qa-db-ja.com

幅と一致するCSSスケールの高さ-おそらくフォームファクターを使用

TwitterBootstrapの基本的なレスポンシブデザインサイトにGoogleMapsV3マップを実装しました。

しかし、私の質問は非常に簡単です：私は持っています：

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

そして

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

高さをフォームファクターに変更できるようにしたいと思います。この「私の夢の中のCSS」のように

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

私は高さを省略し、自動に設定し、あらゆる種類のpersentagesを試しましたが、divが常に私に崩れるようにしました。

私はjs-ソリューションを書くのに問題はありませんが、シンプルなクリーンカットCSSソリューション、可能なCSS3を期待しています

それが不可能な場合、これから私をjsする最適な方法は何ですか？ （タイマー、イベントなど）

htmlcssresponsive-design
47
Steen

このためには、JavaScriptを使用するか、ある程度サポートされているcalc() CSS式に依存する必要があります。

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)
}
8
Greg

ここにあります。純粋なCSS。余分な「コンテナ」要素が1つ必要です。

フィドル

（実際にはtinkerbin）： 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%;
}
91
banzomaikaka

高さにはvwを使用してみてください。 https://developer.mozilla.org/en/docs/Web/CSS/length

何かのようなもの

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

これにより、divの幅がビューポートの幅の60％に設定されます。パディングを考慮するには、おそらくcalcを使用して調整する必要があります…

46
Pit
.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 = 56.25

7
Pax Exterminatus

正方形ではなく「流体」長方形を作成する必要があります。..JOPLに感謝します。

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


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

ビューポートを試す

幅データを使用して、それに応じて高さを計算できます

この例は、150x200px画像用です

width: calc(100vw / 2 - 30px);
height: calc((100vw/2 - 30px) * 1.34);
2
Stavros

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属性を使用するか、インラインスタイルのwidth CSSプロパティを使用して、要素の幅を明示的に設定する必要があるためです。

0
Alexander Pavlov

Jqueryを使用したソリューション

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