Bootstrap carrousel de redimensionnement de l'image

Salut, je suis en train de faire un carrousel sur mon site wordpress avec bootstrap. Je voudrais en mettre quatre bloquer les liens à côté d'elle. J'ai les blocs et les images sont de défilement bien, mais je crois que le carrousel est en train de changer la hauteur de l'image.

J'ai des images (640 x 360) et j'ai fait les 4 blocs de 90 pixels de haut. Je l'ai fait, donc les blocs serait alignée avec le bas du carrousel. Sauf les blocs sont trop gros. Je ne comprends pas ce que le problème pourrait être. Et j'ai cherché par 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>
où est la capture d'écran?
oups désolé, l'un sec
Je ne sais pas pourquoi il ne me laisse pas insérer une immage, mais voici le lien: skydrive.live.com/...

OriginalL'auteur Jake B | 2013-06-28

  1. 21

    La raison pour laquelle votre image est en cours de redimensionnement qui est parce qu'il est fluide. Vous avez deux façons de le faire:

    1. De donner une dimension fixe à votre image à l'aide de CSS comme:

      .carrousel-intérieur > .item > img { 
width:640px; 
hauteur:360px; 
}

    2. Une deuxième façon de procéder: 

      .carrousel { 
width:640px; 
hauteur:360px; 
}
    J'ai tout essayé pour changer l'image, de style en ligne, css feuilles, rien ne semble l'affecter.
    u peut donner un violon lien de votre code pour m'aider à mieux comprendre
    Assurez-vous que votre css de mise à jour proposé par @LegendaryAks après le bootstrap css

    OriginalL'auteur LegendaryAks

  2. 20

    ajouter ceci dans votre css:

    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
    Cela a fonctionné pour moi: <style> .carrousel-intérieur > .item > img{ width:100%; height:208px; } </style>
    Résolu le problème dans Firefox 37.0.2 et IE 11.
    Je peux confirmer @hdlopes commentaire. Cela a été me rend fou sur Firefox. Merci!!!!

    OriginalL'auteur Alex Z

  3. 2

    J'ai eu le même problème. Vous devez utiliser toutes les images avec la même hauteur et la largeur. vous pouvez simplement modifier à l'aide de l'application de la peinture à partir de windows à l'aide de l'option de redimensionnement dans la section d'accueil et ensuite utiliser les CSS pour redimensionner l'image. Peut-être que ce problème se produit car la largeur et la hauteur de l'attribut à l'intérieur de la balise n'est pas de répondre.

    OriginalL'auteur Nilkamal Gotarne

  4. 1

    Mettre le code suivant dans la section head de votre page web de la programmation.

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

    OriginalL'auteur saeed ahmed

  5. 0

    remplacer votre balise 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" />

    utiliser l'attribut style et assurez-vous il n'y a pas de classe css pour l'image de ce qui définir l'image de la hauteur et la largeur

    Merci pour votre aide, mais je ne suis pas sûr de son travail 🙁 je suis allé dans firefox éditeur de style après j'ai changé les balises d'image, mais rien n'est influe sur la taille du carrousel d'images.

    OriginalL'auteur sangram parmar

  6. -3

    j'ai eu ce problème ans en arrière..mais je l'ai obtenu. Tout ce que vous devez faire est de définir la largeur et la hauteur de l'image que vous voulez..ce que je veux dire, c'est votre image dans votre carrousel intérieure ...ne pas ajouter l'attribut style comme "style":"(non, pas cela), mais quelque chose comme cela et assurez-vous que vos codes ar corriger sa va marcher...Bonne chance

    Merci de modifier votre réponse. Pourriez-vous fournir un exemple de code solution?

    OriginalL'auteur emmanuel