Bootstrap carosello ridimensionamento immagine

Question

Ciao Sto cercando di fare un carosello sul mio sito web wordpress con bootstrap. Vorrei mettere quattro link di blocco accanto ad esso. Ho i blocchi lì e le immagini stanno scorrendo bene, tuttavia credo che la giostra stia cambiando l'altezza dell'immagine.

Ho immagini (640 x 360) e ho realizzato i 4 blocchi alti 90 pixel. L'ho fatto in modo che i blocchi fossero a filo con il fondo della giostra. Tranne i blocchi sono troppo grandi. Non capisco quale potrebbe essere il problema. E ho cercato attraverso tutti i CSS.

Ecco il mio codice:

<!--==========================================--> 
<!-- Carousel         --> 
<!--==========================================--> 
<div> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 

      <!--Carousel item 1--> 
      <div class="item active"> 
       <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" /> 
       <div class="carousel-caption"> 
        <h4>First Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 

      <!--Carousel item 2--> 
      <div class="item"> 
       <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" /> 
       <div class="carousel-caption"> 
        <h4>Second Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 

      <!--Carousel item 3--> 
      <div class="item"> 
       <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" > 
       <div class="carousel-caption"> 
        <h4>Third Thumbnail label</h4> 
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       </div> 
      </div> 

     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div> 
</div> 

<!--==========================================--> 
<!-- Side Buttons        --> 
<!--==========================================--> 
<div> 
    <ul class="nav nav-tabs nav-stacked"> 
     <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li> 
     <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li> 
     <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li> 
     <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li> 
    </ul> 
</div> 

Answer 1

Il motivo per cui l'immagine viene ridimensionata, perché è fluida. Ci sono due modi per farlo:

1. O dare una dimensione fissa alla tua immagine usando i CSS come:

   .carousel-inner > .item > img { 
       width:640px; 
       height:360px; 
   }

2. Un secondo modo di può fare questo:

   .carousel { 
       width:640px; 
       height:360px; 
   }

Answer 2

sostituire il tuo tag immagine con

<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" /> 

attributo utilizzo stile e assicurarsi che non v'è alcuna classe CSS per un'immagine che ha fissato l'altezza e la larghezza dell'immagine

Answer 3

aggiungi questo al tuo css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    width: 100%; 
} 

Answer 4

Ho avuto lo stesso problema. Devi usare tutte le immagini con la stessa altezza e larghezza. puoi semplicemente cambiarlo usando l'applicazione paint da windows usando l'opzione ridimensiona nella sezione home e poi usa CSS per ridimensionare l'immagine. Forse questo problema si verifica perché l'attributo width e height all'interno del tag non risponde.

Answer 5

Inserire il seguente codice nella sezione della testa della programmazione della pagina web.

<head> 
    <style>.carousel-inner > .item > img { width:100%; height:570px; } </style> 
</head>