web-dev-qa-db-ja.com

CSS：divの高さを幅に対して維持する

私の質問はこの質問と非常によく似ています： CSS：アスペクト比を維持しながら幅または高さを100％？

位置が固定されているdivがあります。 divのwidthは100％で、heightはwidthのちょうど1/6でなければなりません。これを行う-webkit-calc（）方法はありますか？

注：ズーム/方向の変更が幅/高さに影響を与える可能性があるため、JSソリューションは推奨されません。

javascriptcsshtmlresponsive-designaspect-ratio
14
Akshaya Shanbhogue

これはあなたが求めているものですか？ -webkit-calc()はまったく使用していません。 _1px_ by _6px_画像を_position: fixed_が適用された外側のdivに挿入し、画像にwidthを設定しました。 _100%_および_position: relative_の。次に、祖先と同じ高さと幅になるように絶対的に配置された内部divを追加しました。

これで、外側のdivの幅を変更でき、画像の_width: 100%_設定により、外側と内側の両方のdivの高さが常に等しいことが保証されます。それらの幅の1/6（または、少なくとも可能な限り正確に等しくなると、高さは最も近い整数のピクセルに丸められます）。すべてのコンテンツは、内部のdiv内に入る可能性があります。

[〜＃〜] html [〜＃〜]

_<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
_

[〜＃〜] css [〜＃〜]

_html, body {
  margin: 0px;
  padding: 0px;
}
div {
  position: fixed;
  width: 100%;
}
div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      
}
img {
  width: 100%;
  display: block;      
  position: relative;
}
_

これが jsFiddle 要求された動作を示します。

10
Mathijs Flietstra

レスポンシブ四角柱 で説明したソリューションを使用することもできます。

これは、％padding-top/bottomおよびmargin-top/bottomが親要素のwhidthに従って計算されるという事実に基づいています。

あなたの状況に適応すると、次のようになります：

[〜＃〜]フィドル[〜＃〜]

HTML：

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS：

.wrap{
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/
}
.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
6
web-tiki