it-swarm.com.de

Bild des Bootstrap-Karussells

Hallo, ich versuche auf meiner WordPress-Website mit bootstrap ein Karussell zu erstellen. Ich möchte vier Blocklinks dazu setzen. Ich habe die Blöcke dort und die Bilder scrollen gut. Allerdings glaube ich, dass das Karussell die Höhe des Bildes verändert.

Ich habe Bilder (640 x 360) und habe die 4 Blöcke 90 Pixel hoch gemacht. Ich habe das getan, damit die Blöcke mit dem Boden des Karussells bündig sind. Außer die Blöcke sind zu groß. Ich verstehe nicht, was das Problem sein könnte. Und ich habe alle CSS durchsucht.

Hier ist mein Code:

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

Der Grund für die Größenänderung Ihres Bildes liegt darin, dass es flüssig ist. Sie haben zwei Möglichkeiten, dies zu tun:

  1. Geben Sie Ihrem Bild entweder eine feste Dimension mit CSS:

    .carousel-inner> .item> img {
     Breite: 640px; 
     Höhe: 360px; 
    }
  2. Ein zweiter Weg, dies zu tun: 

    .carousel {
     Breite: 640px; 
     Höhe: 360px; 
    }
23
LegendaryAks

fügen Sie dies Ihrem CSS hinzu:

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

Ich hatte das gleiche Problem. Sie müssen alle Bilder mit gleicher Höhe und Breite verwenden. Sie können es einfach mithilfe der Paint-Anwendung von Windows aus ändern, indem Sie die Option zum Ändern der Größe im Home-Bereich verwenden und dann die Größe des Bildes mit CSS ändern. Möglicherweise tritt dieses Problem auf, weil das Attribut width und height im Tag nicht reagiert.

2

Fügen Sie den folgenden Code in den Kopfbereich Ihrer Webseitenprogrammierung ein.

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

ersetzen Sie Ihr Image-Tag mit 

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

verwenden Sie das style-Attribut, und stellen Sie sicher, dass es keine CSS-Klasse für ein Bild gibt, in der Bildhöhe und -breite festgelegt werden

0
sangram parmar