Étirement et de remplissage de l'image dans le Bootstrap carrousel

Salut les gars, je suis en utilisant bootstrap carousal et avoir un problème avec l'image en hauteur et en largeur. Même si je le définir dans le img attribut il s'affiche toujours comme résolution d'origine,voici le code, je suis en utilisant

<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>

Ici est démo.

Que dois-je faire pour remplir l'image dans une certaine hauteur et la largeur, indépendamment de sa résolution d'origine.

OriginalL'auteur Mike Ross | 2015-11-13

10

Vous pouvez utiliser background-size: cover, tout en ayant caché <img> élément pour le RÉFÉRENCEMENT sémantique et fins. Seul img url est utilisée deux fois, donc il n'y a pas de charge supplémentaire, et fond de taille est bien pris en charge (contrairement à object-fit qui manque de soutien dans IE, Edge et Android < 4.4.4).

Violon Démo

HTML changement:
```
<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>
```
CSS changement:
```
.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;
}
```
pouvez-vous préciser comment les adapter à votre réponse s'il vous plaît ?
C'est de la réactivité du moyen d'affichage d'image (éventuellement utiliser contain au lieu de cover). La réactivité de l'ensemble du carrousel n'est pas une partie de la question, là encore, il est fait allusion déjà que vous pouvez utiliser max-width pour le rendre adaptable en largeur.

OriginalL'auteur Matija Mrkaic
5

Vous pouvez placer hauteur en css et ajouter !important parce que bootstrap est primordial hauteur de votre auto , et l'objet-fit:couverture; comme arrière-plan de la taille de la couverture
un violon
```
.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}
```
OriginalL'auteur عارف بن الأزرق
2

Que vous avez dans la largeur de l'espace réservé ne devrait pas d'importance, mettez ceci dans votre css et cela devrait fonctionner, Si elle fonctionne, vous pouvez essayer de le supprimer !important.
```
 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }
```
.img-responsive dans le bootstrap faudra juste définir la largeur à 100%, Donc dans le cas que l'image d'origine proportions sont à moins de carrousel de largeur, il ne sera pas à la remplir.

j'ai essayé, mais le problème c'est qu'il va l'utilisation réelle de la largeur de l'image elle-même et que je ne veux pas que. Je veux le carousal la hauteur et la largeur pour être 300x350 et quelle que soit la hauteur ou la largeur de l'image il est, mais remplir carousal seulement

OriginalL'auteur Mathias Asberg
2

Faire de votre image prendre jusqu'à 100% de la taille du récipient.
l'utilisation de height:100% et width:100%.

De restreindre la taille par les valeurs de réglage du conteneur à la taille désirée.
```
.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}
```
J'espère que cette aide.

OriginalL'auteur jmag
2

Vous êtes à la définition de la taille de vos espaces dans l'URL, pas dans les attributs HTML pour les éléments.

Également vérifier Bootstrap .img-responsive classe ici.

Mise à jour

Cela a changé à .img-fluid dans le Bootstrap 4 Alpha et Bêta

je pense que l'image réactive et de définir la hauteur et la largeur des deux ne marche pas ensemble. droit

OriginalL'auteur plushyObject
0

Ajoutez à cela le css du fichier. Cela permettrait de limiter la hauteur et la largeur de l'image et donc l'aligner.

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

OriginalL'auteur Shalinee SIngh

Ajouter cette classe dans chaque image, chaque attribut

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" />

Ajouter ce style
```
.active img{
  width: 100%;
}
```

OriginalL'auteur Gnanasekar S

0

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%;
}
```
Par la mise en min-* à des attributs de l'image, nous nous assurons que nous avons au moins 100% de deux width et height.

Mis à jour JSFiddle

OriginalL'auteur Suthan Bala

si c'est acceptable pour vous d'utiliser javaScript simple, voici la mise à jour de violon
https://jsfiddle.net/a1x1dnaa/2/

ce que j'ai fait est, utilisé l'image comme arrière-plan et enlevé le <img> tag.

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();
    });
  });
});

ensuite, vous pouvez utiliser certains styles de faire le remplissage de l'image de la 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 de javaScript, vous pouvez simplement utiliser l'image en ligne-style

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

et utiliser le même CSS que ci-dessus.

OriginalL'auteur Lucian

0
```
.item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}
```
vous essayez cette css et peu de changements dans le code html. j'ai utilisé différents de l'image src pour mieux clearification.

ici est mise à jour de violon

OriginalL'auteur Amit Kumar

Vous devez vous connecter pour publier un commentaire.