Bootstrap карусель изменение размера изображения

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

У меня есть изображения (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>
9
css twitter-bootstrap wordpress

6 ответов

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

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

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

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

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

добавьте это в свой css:

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

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

2

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

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

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

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

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

0

У меня был этот вопрос много лет назад..но я справлюсь. Все, что вам нужно сделать, это задать ширину и высоту изображения, что вы хотите..я имею в виду твой внутренний образ на карусели ...не добавляйте атрибут стиля, например "style:" (нет, не это), но что-то вроде этого и убедитесь, что ваши коды AR исправят его работу...Удачи!--1-->

-1