web-dev-qa-db-fra.com

Étirer et remplir l'image dans le carrousel Bootstrap

Salut les gars, j'utilise bootstrap carousal et j'ai un problème avec la hauteur et la largeur de l'image Même si je le définis dans l'attribut img, il affiche toujours la résolution d'origine.

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Voici demo de cela.

Que dois-je faire pour remplir l'image dans une certaine hauteur et largeur, quelle que soit sa résolution d'origine?.

htmlcsstwitter-bootstraptwitter-bootstrap-3carousel
11
Mike Ross

Vous pouvez utiliser background-size: cover tout en ayant toujours l'élément <img> caché à des fins de référencement et de sémantique. Une seule image unique est utilisée les deux fois. Il n'y a donc pas de chargement supplémentaire. background-size est bien pris en charge (contrairement à object-fit qui manque de support dans IE, Edge et Android <4.4.4).

Fiddle Démo

Changement HTML:

<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>

Changement de CSS: 

.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  width: 300px;
  height: 350px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: hidden;
}
9
Matija Mrkaic

Vous pouvez placer height dans css et ajouter! Important car bootstrap annule votre hauteur avec auto, et object-fit: cover; fonctionnera comme couverture de taille d'arrière-plan un violon

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}
5
عارف بن الأزرق

Vous définissez la taille de vos espaces réservés dans l'URL et non dans les attributs HTML des éléments.

Consultez également la classe .img-responsive de Bootstrap ici .

Mettre à jour

Cela a changé pour .img-fluid dans Bootstrap 4 Alpha et Beta

2
plushyObject

Que vous ayez la largeur dans l’espace réservé ne devrait pas avoir d’importance, mettez ceci dans votre css et cela devrait fonctionner. Si cela fonctionne, vous pouvez essayer de supprimer! Important.

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

.img-responsive dans bootstrap ne fera que régler la largeur à 100%. Ainsi, dans le cas où les proportions d'origine de l'image sont inférieures à la largeur du carrousel, il ne sera pas complété.

2
Mathias Asberg

Faites en sorte que votre image occupe 100% de la taille du conteneur . En utilisant height: 100% et width: 100%.

Limitez ensuite la taille en définissant les valeurs du conteneur à la taille souhaitée.

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

J'espère que ça aide.

2
jmag

Le carrousel se développera pour s'adapter quel que soit le parent par défaut, qui est dans votre cas .col-md-6 et .col-sm-6. Si vous voulez que le carrousel soit au format 300 x 300, appelez la classe/id du carrousel ou le format de votre choix.

Ensuite, bootstrap applique height: auto; aux images du carrousel, ce qui remplacera l'attribut height que vous avez spécifié dans le code HTML. Vous pouvez résoudre ce problème de deux manières différentes: faites de la height (et par souci de cohérence, width aussi) une variable en ligne style sur la balise img si vous souhaitez la conserver dans le code HTML ou appliquez la hauteur aux images de carrousel de votre fichier CSS.

body {
    margin: 10px;
}
.carousel, .carousel img {
  width: 300px;
}
.carousel img {
  height: 300px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/400x400">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x450">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>

2
Michael Coker

Ajoutez ceci au css du fichier. Cela limiterait la hauteur et la largeur de l'image et donc l'alignerait.

.item img { max-height: 300px; max-width: 350px; }

0
Shalinee SIngh

si vous pouvez utiliser du javaScript simple, voici le violon mis à jour https://jsfiddle.net/a1x1dnaa/2/

ce que j'ai fait est d'utiliser l'image en tant qu'arrière-plan et de supprimer la balise <img>.

jQuery(function(){
  var items = $('.item');
  items.each(function() {
    var item = $(this);
    img = item.find("img");
    img.each(function() {
        var thisImg = $(this);
        url = thisImg.attr('src');
        thisImg.parent().attr('style', 'background-image:url('+url+')');
        thisImg.remove();
    });
  });
});

alors vous pouvez utiliser certains styles pour que l'image remplisse le div

.item {
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 200px; //you can use the height as you need 
}

cela devrait fonctionner pour vous.

si vous ne voulez pas utiliser javaScript, vous pouvez simplement utiliser l'image comme style inline 

<div class="item" style="background-image: url(http://placehold.it/400x400)"></div>

et utilisez les mêmes CSS que ci-dessus.

0
Lucian
.item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}

vous essayez ce css et peu de changement en html. J'ai utilisé différentes images src pour une meilleure clearification.

ici est mis à jour le violon

0
Amit Kumar

J'ai rencontré le même problème… .. Ce qui a fonctionné pour moi est que, au lieu d'utiliser img, j'ai utilisé div et background-image pour css

HTML:

<div class="carousel-inner">
  <div class="item active">
    <div class="carousel-img"></div>
  </div>
</div>

CSS:

.carousel-inner, .item {
    height: 100%;
}

.carousel-img {
    background-image: url('http://placehold.it/400x400');
    width: 100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
0
Char
  1. Ajouter cette classe dans chaque attribut d'image

class="img-responsive center-block"

Par exemple:

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />

  1. Ajouter ce style

    .active img{
  width: 100%;
}
0
Gnanasekar S

Essayez de supprimer le style de la balise img:

<!--from-->

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
<!--to-->
<img src="http://placehold.it/350x350/aaa&text=Item 3"/>

0
NanoCellMusic

Vous pouvez le faire avec les styles suivants:

.carousel-inner .item{
  width: 600px; /* Any width you want */
  height: 500px; /* Any width you want */
}
.carousel-inner .item img{
  min-width: 100%;
  min-height: 100%;
}

En définissant min-* sur les attributs d’image, nous nous assurons d’avoir au moins 100% de width et height.

Mise à jour JSFiddle

0
Suthan Bala