Bootstrap carousel resizing image

Question

Привет Я пытаюсь сделать карусель на моем сайте Wordpress с бутстрапом. Я хотел бы добавить четыре блок-ссылки рядом с ним. У меня есть блоки, и изображения прокручиваются отлично, но я считаю, что карусель меняет высоту изображения.

У меня есть изображения (640 x 360), и я сделал 4 блока высотой 90 пикселей. Я сделал это, чтобы блоки были заподлицо с нижней частью карусели. Кроме того, что блоки слишком большие. Я не понимаю, в чем проблема. И я просмотрел все CSS.

Вот мой код:

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

Причина, по которой ваше изображение изменяет размеры, потому что оно является текучим. У вас есть два способа сделать это:

1. Либо дают фиксированный размер для вашего изображения с помощью CSS, как:

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

2. Второй способ может сделать это:

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

Answer 2

заменить тег изображения с

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

атрибута использования стиля и убедитесь, что нет класса CSS для изображения, которые устанавливают высоту изображения и ширину

Answer 3

Добавить это в ваш css:

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

Answer 4

У меня была та же проблема. Вы должны использовать все изображения с одинаковой высотой и шириной. вы можете просто изменить его, используя приложение Paint из окон, используя параметр изменения размера в домашнем разделе, а затем используйте CSS для изменения размера изображения. Возможно, эта проблема возникает из-за того, что атрибут width и height внутри тега не отвечает.

Answer 5

Поместите следующий код в раздел главы в своем программировании на веб-странице.

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