Twitter Bootstrap Carousel mit überstehender reaktionsschnell Bild

Ich versuche einen Weg zu finden, um eine "responsive" Bild-overlay, das Karussell von Twitter bootstrap.

Fand ich Wie füge ich eine Maske über ein bootstrap-element? was mir half, mit dem buchdeckeleinband - aber wenn ich das Bild in das div, es spielt nicht die Größe wie im Karussell.

Von dem, was ich gelesen habe, die Bilder in der bootstrap habe max-width:100% - bedeutet das, dass Breite für das overlay-div?

Fiddle: http://jsfiddle.net/CF8m8/ - ändern Sie die Breite der Ergebnis-Fenster, um zu sehen, was ich meine.

Dankbar für alle Hilfe.

wollen Sie die überlagerung auf die Größe?
Danke für Eure Antworten. Ja, ich möchte die Größe des Bildes in das overlay ist gut, so passt es "inside", das Karussell.

InformationsquelleAutor nubje | 2013-02-24

  1. 4

    Können Sie Folgendes tun : Jsfiddle Jsfiddle mit overlay in der Größe verändert

    Jsfiddle im browsercheck-in browser

    Edit: ich schlage vor, Sie verwenden verschiedene Größen von Bildern gerecht zu werden anderen Bildschirm , so dass Sie nicht verlieren die Qualität und auch das Verhältnis kann behoben werden, nach Ihrer Wahl . Als laden Sie diese Bilder mit media queries , also bei jedem anderen Bildschirm, Sie dienen Ihnen verkleinerte Bild, die passen gut auf Ihre carousal . 

    <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">‹</a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›</a>
  </div>
 </div>

    In css verwenden Sie die folgenden :

    .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%;

  }
}
    Danke! Das ist eine Art, was ich bin nach, aber gibt es eine Möglichkeit zu haben die Größe des Bildes zu ändern, halten Sie das Seitenverhältnis, statt es mit dem Clip? Es ist für ein logo - weiß nicht, ob es am besten Praxis, um die Größe anzupassen, obwohl - vielleicht bin ich besser von der Entwicklung neuer Versionen des Bildes statt.
    wird es beschnitten, da sind wir Größenänderung, um eine abnorme Ebene , eine optimierte Bild wird Verhalten mehr richtig . Und ich habe Euch den Weg zeigen, es zu tun . Die anderen wwat, die Sie tun können, ist das erstellen unterschiedlicher Größe Bilder dienen unterschiedliche Bildschirm-Größen und als Sie in die Abfragen die ich oben geschrieben habe , auf diese Weise die Größe und qualiy gesteuert werden kann . Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen
    Was meinst du mit "optimiertes Bild"? Von meinem versucht, das Karussell zu bekommen, verkleinert und nicht beschnitten, so dass, wenn das overlay könnte dasselbe Verhalten, wäre perfekt. Ich habe auch versucht, mit unterschiedlich großen Bilder, aber es gibt viel der media queries zu tun 🙂
    Ich habe aktualisiert die Antwort . Von der Möglichkeit, durch optimierte ich meine , können Sie mit photoshop, und erstellen Sie 3 unterschiedliche Versionen von Ihrem logo , in der Größe verändert und angepasst-Bildschirm Größen .
    keiner von dieser Arbeit!

    InformationsquelleAutor Shail

  2. 4

    Ich denke, es ist eine bessere Lösung. @Shail. Ich werde deinem Beispiel selbst.

    Fügen Sie ein Bild, wie ich unten auf die div=overlay und fügen Sie die Klasse "Bild-responsive". Dann bootstrap kümmert sich um den rest. 

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

    Benutzte ich die Größe width="1200px" und height="300px(oder was auch immer Höhe, die Sie wollen)"

    Nach dem entfernen der unnötigen styles der CSS-Code würde dann wie folgt Aussehen.

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

    Dies ist alles, was Sie tun müssen. Sie können beseitigen Sie alle anderen unnötigen CSS-Stile.

    InformationsquelleAutor Philip Kurian

  3. 1

    Die beste Wette, um Ihr Bild zu verkleinern ohne media queries wird, um zu geben Sie Ihrem Bild eine Klasse "img-responsive".

    Bootstrap hat schon gebaut mit den erforderlichen Medien Abfragen und skalieren Sie Ihr Bild nach unten zu skalieren. Denken Sie daran, nicht eine Feste Höhe für den container, der das Bild, oder die Skala nach unten wird sich nur auf die Breite, als Ihre "Feste Höhe" wird wahrscheinlich überschreiben alle vorherigen css-Code für die Skalierung der Höhe.

    Als für die overlay-Teil...das wurde ausreichend beantwortet wurden.

    InformationsquelleAutor Brandon Gibbs

Schreibe einen Kommentar