1

Twitterブートストラップから「レスポンシブ」画像をカルーセルにオーバーレイする方法を見つけようとしています。

ブートストラップ要素の上にマスクを追加するにはどうすればよいですか？これはオーバーレイに役立ちましたが、画像をそのdivに追加すると、カルーセルのようにサイズが変更されません。

ブートストラップの画像を読んだところmax-width:100%、オーバーレイdivの幅を設定する必要があるということですか？

フィドル： http： //jsfiddle.net/CF8m8/-結果ウィンドウの幅を変更して、意味を確認します。

すべての助けに感謝します。

4

3 に答える 3

4

あなたは次のことができます：サイズ変更されたオーバーレイを持つJsfiddle Jsfiddle

Jsfiddleinbrowserチェックインブラウザ

編集：さまざまなサイズの画像を使用してさまざまな画面に対応することをお勧めします。そうすれば、品質が低下することはなく、選択に応じて比率を固定することもできます。これらの画像をメディアクエリで読み込むよりも、さまざまな画面ごとに、カルーサルにぴったり合うサイズ変更された画像を提供します。 

<div class="container">
 <div class="carousel slide">
  <div class="carousel-inner">
    <div class="overlay"></div>
    <div class="item active">
        <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a>
    </div>
 </div>
 <a class="carousel-control left" href=".carousel" data-slide="prev">‹&lt;/a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›&lt;/a>
  </div>
 </div>

cssでは、次を使用します。

.overlay {
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }
     @media (min-width: 768px) and (max-width: 979px) {
      .overlay{

         width:50%;
        height:50%;
  }    
 }

  @media (max-width: 767px) {
     .overlay{

  width:50%;
  height:50%;
  }

  }
@media (max-width: 480px) {
   .overlay{
   width:50%;
  height:50%;

  }
}
于 2013-02-25T08:03:06.480 に答える
4

より良い解決策があると思います。@Shail。私はあなたの例自体を使用します。

以下に示すような画像をdiv=overlayに追加し、クラス「image-sensitive」を追加します。その後、ブートストラップが残りの処理を行います。

<div class="overlay">
<img src="images/slideshowfx.png" class="image-responsive"/>
</div>

サイズwidth="1200px"とheight="300px（または任意の高さ）"を使用しました

不要なスタイルを削除すると、CSSは次のようになります。

.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

これがあなたがする必要があるすべてです。他のすべての不要なCSSスタイルを削除できます。

于 2013-08-05T03:06:36.200 に答える
1

メディアクエリを使用せずに画像のサイズを変更するための最善の策は、画像に「img-response」のクラスを与えることです。

Bootstrapはすでに必要なメディアクエリを作成しており、画像を縮小して拡大縮小します。画像が含まれているコンテナの高さは固定されていないことを忘れないでください。固定された高さは、高さをスケーリングするための以前のcssを上書きする可能性があるため、幅にのみ影響します。

オーバーレイ部分については...上記で十分に回答されています。

于 2015-10-01T22:44:06.720 に答える