web-dev-qa-db-ja.com

高さBootstrap Jumbotronであるが応答性が高いまま

私は Bootstrap's Jumbotron で遊んで背景画像を配置しました。非常に簡単：

.jumbotron
{
    background: url('path/to/images/banner.jpg') no-repeat center center; 
    background-size: cover;
}

そして

<div class="jumbotron">
    <div class="container">...</div>
</div>

それは素晴らしく見え、応答性があります。しかし、ジャンボトロンはその中のコンテンツと同じくらいの大きさしかない-私はほとんど持っていません。その結果、私が望むよりもはるかに薄くなり、応答性を維持しながらデフォルトの高さを増やしたいと思います。そのため、たとえば、次のようなものは機能しません。

<div class="jumbotron">
    <div class="container" style="height: 600px;">...</div>
</div>

高さは適切ですが、画像の反応が悪くなりました。私は利用できるさまざまなミックスイン/変数を調査してきましたが、何かが飛び出して活用できると期待していますが、運がありません。

htmlcsstwitter-bootstrapresponsive-design
11
JasCav

私はパディングでそれをします：

.jumbotron {
    ...
    padding: 5em inherit;
}

相対単位を使用することにより、スケーリングします。

中間デモ

または、最小の高さを使用します。

.jumbotron {
    ...
    min-height: 300px;
}

中間デモ

これにより、必要に応じて要素を展開できます。

14
isherwood

これを実現するには、ジャンボトロンCSSで相対パディングトップと相対パディングボトムを使用します。

    .jumbotron {
      background: url('http://placekitten.com/800/500') no-repeat center center;
      background-size: cover;
      padding-top: 20%;
      padding-bottom: 20%;
    }
<div class="jumbotron">
  <div class="container">
    <h1>Your Text Here!</h1>
  </div>
</div>
2
Paul Jansen

以下のコードはすべての画面で機能します：

.jumbotron {
  background: url('backgroundimage.jpg') no-repeat center center fixed;
  padding-top: 20%;
  padding-bottom: 20%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Coverプロパティは、コンテナ全体を覆うように背景画像のサイズを変更します。画像を引き伸ばしたり、エッジの1つを少し切り取ったりする必要がある場合でも同様です。

0
Dhanesh Agrawal

固定の高さを管理する場合、画像は実際にはコンテナでうまく再生されません。画像の縦横比またはサイズを無視します。最良の方法は、画像のアスペクト比とコンテナのサイズの間の共通点を見つけることです。 _background-image_を使用するときは、すべてをコンテナに依存しているため、これはさらに複雑です。

したがって、カバーの代わりに、_background-size: contain;_のようなものを試してください。それをいじって、画像がどのように拡大縮小されるかを判断します私は通常、良いbg-imageを実装する前にいくつかの数学をしなければなりません。したがって、画像が_1200x600_の場合、幅と高さの比率が_2:1_であることがわかっているため、それに応じて高さを調整できます。レスポンシブデザインの出番です。@media()クエリを使用して_.jumbotron_の高さを変更し、主要な画面サイズを反映できます。ある時点で、イメージはオーバーフローしますが、少なくとも_.jumbotron_が_2:1_の比率からあまり遠くに行かないことを確認したため、それほど多くはありません。 _background-size: cover_は、画像がどのように拡大縮小されるかを気にしません。画像のアスペクト比に関係なく、_.jumbotron_全体を強制的にカバーします。また、固定高さの代わりに_min-height_を実装して、_.jumbotron_が特定のサイズに強制されないようにすることもできます。

0
Bwaxxlo