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

Question

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

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

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

と

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

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

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

私は高さを省き、自動に設定し、あらゆる種類の見解を試してみましたが、常にdivを崩壊させるためだけです。

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

不可能な場合、これから私をjsするための最適な方法は何でしょうか？（タイマー、イベント...など）

score 114 · Accepted Answer

ここにあります。純粋なCSS。追加の「container」要素が1つ必要です。

フィドル

~~（実際にはtinkerbin）：http~~ : //tinkerbin.com/rQ71nWDT（Tinkerbinは死んでいます。）

ソリューション。

例全体で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%;
}

score 53 · Accepted Answer

vw身長に使ってみてください。https://developer.mozilla.org/en/docs/Web/CSS/length

何かのようなもの

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

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

score 34 · Accepted Answer

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

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

またはCSScalcを使用します（ここでのサポートを参照してください：http：//caniuse.com/calc）

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

score 22 · Accepted Answer

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

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

16：9

パディングボトム=9/16* 100 = 56.25

score 6 · Accepted Answer

ビューポートを試す

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

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

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

score 4 · Accepted Answer

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

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


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

score 1 · Accepted Answer

を設定してbefore、after幅と高さの比率を一定にすることができます

HTML：

<div class="squared"></div>

CSS：

.squared {
  background: #333;
  width: 300px; 
}
.squared::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.squared::after {
  content: '';
  display: block;
  clear: both;
}

score 0 · Accepted Answer

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.72widthDOM属性またはインラインスタイルのwidthCSSプロパティを使用して、要素に幅を明示的に設定する必要があるため、機能しません。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

私はYouTubeのIFRAMEで同様のことを行いました。ここでは、iframeがグリッド内にあり、常にポートレート/ランドスケープに基づいて変更されるため、このコードは次のように機能します。

したがって、この質問のコードは次のとおりです。

// Layout resize
let height = window.innerHeight;
let width = window.document.getElementById('player').parentNode.clientWidth;
    height = width / 1.77;

<div id="player"></div>

... etc ..

function onYouTubeIframeAPIReady() {
          // Layout resize
          let height = window.innerHeight;
          let width = window.document.getElementById('player').parentNode.clientWidth;
              height = width / 1.77;

          player = new YT.Player('player', {
            width: '100%',
            height: height,            
            videoId: currentVideoId,
            playerVars: {
              'autoplay': 0,
              'loop': 0,
              'mute': 0,
              'controls': 0,
              'enablejsapi': 1,
              'playsinline': 0,
              'rel': 0,
              'widget_referrer': 'http://my domain ...'
            },
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange,
              'onError': onError
            }
          });
        }

score -3 · Accepted Answer

-3

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

于 2019-11-30T23:20:49.653 に答える

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

11 に答える 11

Related

Reference