Einstellen der Höhe, Breite des Bildes Karussell

Question

Code Mein Bild Karussell als

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-md-offset-0"> 
      <div id="imageCarousel" class="carousel slide" data-interval="4000" 
       data-ride="carousel" data-pause="hover" data-wrap="true"> 

       <ol class="carousel-indicators"> 
        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#imageCarousel" data-slide-to="1"></li> 
        <li data-target="#imageCarousel" data-slide-to="2"></li> 
        <li data-target="#imageCarousel" data-slide-to="3"></li> 
       </ol> 

       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="~/Images/Desert.jpg" class="img-responsive"> 
         <div class="carousel-caption"> 
          <h3>Desert</h3> 
          <p>Desert Image Description</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="~/Images/Jellyfish.jpg" class="img-responsive"> 
         <div class="carousel-caption"> 
          <h3>Jellyfish</h3> 
          <p>Jellyfish Image Description</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="~/Images/Lighthouse.jpg" class="img-responsive"> 
         <div class="carousel-caption"> 
          <h3>Lighthouse</h3> 
          <p>Lighthouse Image Description</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="~/Images/Penguins.jpg" class="img-responsive"> 
         <div class="carousel-caption"> 
          <h3>Penguins</h3> 
          <p>Penguins Image Description</p> 
         </div> 
        </div> 
       </div> 

       <a href="#imageCarousel" class="carousel-control left" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a href="#imageCarousel" class="carousel-control right" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div> 

     </div> 
    </div> 
</div> 

---

und addierten die folgenden jquery folgt:

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 

Schließlich habe ich Code nach der Größe einstellen Bilderkarussell

<style> 
.carousel-inner > .item > img { 
width: 1200px; 
height: 360px; 
} 
</style> 

---

Das Problem ist, wenn die Seite geladen wird, lädt es mit den angegebenen Dimensionen und dann plötzlich groß werden. Wenn ich die Breite auf eine andere Zahl ändere, wird die Breite wie erwartet festgelegt, aber die Höhe wird nicht auf den angegebenen Wert gesetzt. Wenn ich die Breite reduziere, ändert sich auch die Höhe mit der Breite. Ich habe den Code für die neue MVC-Webanwendung implementiert und das funktioniert gut, wie ich es erwartet habe. Aber als ich versuchte, das gleiche für existierendes Projekt zu implementieren, bekam ich das Problem, die Höhe des Karussells einzustellen.

Könnten Sie mir bitte jemand eine Idee geben, um dieses Problem zu lösen.

Answer 1

Verwenden Sie !important Regel zu Höhe Eigenschaft. !important Regel überschreibt diese bestimmte Eigenschaft.

.carousel-inner > .item > img { 
 
width: 1200px; 
 
height: 360px !important; 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-md-offset-0"> 
 
      <div id="imageCarousel" class="carousel slide" data-interval="4000" 
 
       data-ride="carousel" data-pause="hover" data-wrap="true"> 
 

 
       <ol class="carousel-indicators"> 
 
        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li> 
 
        <li data-target="#imageCarousel" data-slide-to="1"></li> 
 
        <li data-target="#imageCarousel" data-slide-to="2"></li> 
 
        <li data-target="#imageCarousel" data-slide-to="3"></li> 
 
       </ol> 
 

 
       <div class="carousel-inner"> 
 
        <div class="item active"> 
 
         <img src="~/Images/Desert.jpg" class="img-responsive"> 
 
         <div class="carousel-caption"> 
 
          <h3>Desert</h3> 
 
          <p>Desert Image Description</p> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="~/Images/Jellyfish.jpg" class="img-responsive"> 
 
         <div class="carousel-caption"> 
 
          <h3>Jellyfish</h3> 
 
          <p>Jellyfish Image Description</p> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="~/Images/Lighthouse.jpg" class="img-responsive"> 
 
         <div class="carousel-caption"> 
 
          <h3>Lighthouse</h3> 
 
          <p>Lighthouse Image Description</p> 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="~/Images/Penguins.jpg" class="img-responsive"> 
 
         <div class="carousel-caption"> 
 
          <h3>Penguins</h3> 
 
          <p>Penguins Image Description</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <a href="#imageCarousel" class="carousel-control left" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left"></span> 
 
       </a> 
 
       <a href="#imageCarousel" class="carousel-control right" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right"></span> 
 
       </a> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div>