web-dev-qa-db-fra.com

Image de redimensionnement du carrousel Bootstrap

Salut, je suis en train de faire un carrousel sur mon site wordpress avec bootstrap. Je voudrais mettre quatre liens de bloc à côté de cela. J'ai les blocs et les images défilent bien. Cependant, je pense que le carrousel change la hauteur de l'image.

J'ai des images (640 x 360) et j'ai fabriqué les 4 blocs de 90 pixels de haut. J'ai fait cela pour que les blocs soient alignés avec le bas du carrousel. Sauf que les blocs sont trop gros. Je ne comprends pas ce que le problème pourrait être. Et j'ai cherché dans tous les CSS.

Voici mon 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>
csswordpresstwitter-bootstrap
9
Jake B

La raison pour laquelle votre image est en train de redimensionner est qu’elle est fluide. Vous avez deux façons de le faire:

  1. Soit donner une dimension fixe à votre image en utilisant CSS comme:

    .carousel-inner> .item> img {
 largeur: 640px; 
 hauteur: 360px; 
}

  2. Une deuxième façon de faire cela: 

    .carousel {
 largeur: 640px; 
 hauteur: 360px; 
}
23
LegendaryAks

ajoutez ceci à votre css:

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

J'ai eu le même problème. Vous devez utiliser toutes les images de même hauteur et largeur. vous pouvez simplement le changer à l'aide de l'application Paint à partir de Windows à l'aide de l'option de redimensionnement de la section d'accueil, puis utilisez CSS pour redimensionner l'image. Peut-être que ce problème se produit parce que l'attribut width et height à l'intérieur de la balise ne répond pas.

2
Nilkamal Gotarne

Mettez le code suivant dans la section head de votre programmation de page Web.

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

remplacez votre tag d'image avec 

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

utilise l'attribut style et s'assure qu'il n'y a pas de classe css pour l'image qui définit la hauteur et la largeur de l'image

0
sangram parmar