die Steuerung der Höhe des Karussells Größe

Ich versuche, um sicherzustellen, dass meine Karussell-Größe gleich bleiben, in Bezug auf die Höhe. Ich bin mit verschiedenen Bildern, und ich verstehe die Größe des Bildes unterschiedlich sind, aber nicht wissen, wie die Kontrolle der Höhe des Bildes. Ich will mein Karussell Höhe bleiben die gleichen, unabhängig von der Größe des Bildes so, wie kann ich kontrollieren, dass? hier ist der code, den ich verwende:

<div id="myCarousel" class="carousel slide"  data-ride="carousel" >
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <%--<img src="img_chania.jpg" alt="Chania" width="460" height="345">--%>
          <img src="img/sleep1.jpg" alt="Chania" width="460" height="345" />
          <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>this is test </p>
         </div>
      </div>

      <div class="item">
       <%-- <img src="img_chania2.jpg" alt="Chania" width="460" height="345">--%>
          <img src="img/image5.jpg" alt="Chania" width="460" height="345"/>

      </div>

      <div class="item">
        <%--<img src="img_flower.jpg" alt="Flower" width="460" height="345">--%>
          <img src="img/nature3.jpg" alt="Chania" width="460" height="145" />
          <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>this is test </p>
         </div>
      </div>

      <div class="item">
        <%--<img src="img_flower2.jpg" alt="Flower" width="460" height="345">--%>
          <img src="img/nature2.jpg" alt="Chania" width="460" height="245"/>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  • Auf die Klasse item Höhe festlegen height: 400px; - so Einfach ist das. Auch Sie sollte alle relevanten code (CSS).
  • Dank Ruddy, ist es das, was du meinst: <img src="img/image5.jpg" alt="Chania" width="460" height: 400px;/> ? ich bin nicht wirklich Folgendes..
  • Ich werde zu erraten, haben Sie wenig Erfahrung mit web-Entwicklung. Sie sollten gehen und schauen Sie sich um, wie diese Art der Sache ist sehr basic. <img src="img/image5.jpg" alt="Chania" width="460" height="400px"/> ist das, was Sie würde tun wollen, dann. Wenn Sie wollte, um das Bild auf dieser Höhe.
  • ich habe versucht, dass es nicht funktioniert
InformationsquelleAutor moe | 2015-01-15
  1. 3

    Auf die Klasse .item fügen Sie einige benutzerdefinierte CSS, die das überschreibt Bootstraps core CSS etwa so: 

     <style>
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
     display: block;
     max-width: 100%;
     height: 400px !important;
 }
 </style>

    Dadurch wird das Karussell Größe 400px.

    Standardmäßig wird die Höhe auf auto eingestellt ist, aber da wir nicht wollen, dass wir manuell eine bestimmte Größe festlegen und sagen, dass es !important so weiß der browser, dass dieser Stil ist die Aufhebung der bootstrap-css vor.

    Ich hoffe, das hilft und macht Sinn.

    • danke Jason, dass das Problem mit der Höhe, aber jetzt ist die Breite kleiner ist jetzt und vor der Breite war die gleiche Größe wie das Karussell. bitte helfen Sie. Dank
    • Hmm, setzen Sie die Breite auf einen bestimmten gewünschten Breite als gut. Oder versuchen Sie es auf auto.
    InformationsquelleAutor Jason Bassett
  2. 0

    Habe ich das problem gelöst, indem einfach diesen code in den tag

    <div id="Div1" class="carousel" runat="server" style="height:800px !important;">

    wird automatisch erhöhen Sie die Größe und wenn Sie möchten, fügen Sie Breite zu.
    Danke

    InformationsquelleAutor Subhanjan Basu
Schreibe einen Kommentar