2
を埋めるように、アロハ、ここでブートストラップバックグラウンドカバーセット画像高さがページ
は私のペンです - http://codepen.io/DarrenHaynes/full/gLoYpp/
そして、そのペンからコード：
HTML：
<div class="container-fluid spiritual-background">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-4">
<h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
<h3>- Billy Ocean</h3>
</div>
<div class="col-md-1"></div>
</div>
<div class="toolbar">
<button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
<button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
<button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
<button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
</div>
</div>
CSS：
.spiritual-background {
background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.toolbar {
margin-bottom: 4%;
margin-left: 56%;
}
.row {
margin-top: 8%;
margin-bottom: 7%;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
背景の画像の高さを完全に表示する方法を見つけようとしていますが、まだそのページを覆っています。それが立つにつれて、画像の岩石は画像の下部で切り取られますが、私は画像の全体の高さを見たいと思っています。
イメージを「html」タグまたは「body」タグに入れないようにしたい - 「container-fluid」タグ内のクラスを削除および追加するためにjqueryを使用して、4ツールバーのボタンをクリックします。言い換えれば、「霊的背景」は取り除かれ、私がまだ作成していない別のクラスに配置されます。
2つの選択肢があります。 1） 'background-size：cover'を使うと、ブラウザは画像を全画面にしますが、ブラウザのアスペクト比に合わせて背景の部分を切り落とします。または、2）画像を100％幅と100％の高さにして、ブラウザビューポートのアスペクト比が何であっても一致させますが、ブラウザアスペクト比が画像アスペクト比と正確に一致しない限り、画像を歪ませます。どっちがいい？ –
イメージストレッチに行きましょう。ストレッチが遠くに物事を取る場合でも私はそれを後で作物することができます。 –