контроль высоты карусели

Question

Я стараюсь, чтобы мой размер карусели оставался неизменным с точки зрения высоты. Я использую разные изображения, и я понимаю, что размер изображения отличается, но не уверен, как управлять высотой изображения. Я хочу, чтобы моя высота карусели оставалась неизменной независимо от размера изображения, и как я могу это контролировать? Вот код, я использую:

<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> 

Answer 1

В классе .item добавить некоторые пользовательские CSS, который переопределяет бутстрэпы ядра CSS вот так:

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

Это сделает размер карусельного 400px.

По умолчанию высота установлена ​​в автоматическую, но поскольку мы этого не хотим, мы вручную задаем размер и скажем, что это !important, поэтому браузеру известно, что этот стиль отменяет предварительно загруженный bootstrap css.

Надеюсь, это поможет и имеет смысл.

Answer 2

Я решил проблему просто добавив этот код в тег

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

его автоматически увеличивает размер, и если вы хотите добавить ширину тоже. Спасибо