Twitter Bootstrap carrousel image apparaît déformée

Je suis en train de construire un site web basé sur un thème construit avec Twitter Bootstrap: http://demo.graphikaria.com/agilis/theme.

Chaque fois que je diminue la largeur de mon navigateur l'image d'arrière-plan pour la page d'accueil de carrousel est déformé.

Par défaut délavé image d'arrière-plan du modèle utilise, ce n'est pas une grosse affaire, mais si vous souhaitez utiliser une image claire ou logo au lieu de cela, il apparaît déformée ou écrasé.

voir cette question stackoverflow.com/questions/10591422/...

OriginalL'auteur Derek | 2013-06-05

Vous avez:

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

Modifier la hauteur à 100%.

OriginalL'auteur Zubzob

10

Si vous utilisez une balise IMG, il finiront toujours pas plus large que son conteneur DIV. Parce que bootstrap modifie la taille des images fixes pour la mise en page fluide, surtout sur mobile, les images sont écrasé à la largeur de l'écran.

Une alternative qui semble bien fonctionner jusqu'à présent pour moi, c'est de utiliser un <div> tag avec une image de fond.

La classe:
```
.carousel-inner > .item > .carousel-image {
    width: 100%;
    height: 500px; 
    text-align: center;
    align: center;
}
```
Le Code De L'Article:
```
#csl-item1 {
    background:url(img/carousel_image1.jpg); 
    background-repeat: no-repeat;   
    background-position: center top; 
}
```
L'Article:
```
<div class="item active">
  <div id="csl-item1" class="carousel-image">&nbsp;</div>
  <div class="container">
    <div class="carousel-caption">
      
    </div>
  </div>
</div>
```
Je serais curieux de voir si quelqu'un a des bugs avec cette méthode tho, alors laissez-moi savoir si vous pensez que c'est une mauvaise idée...

C'est bien, je voudrais ajouter background-size: cover; pour remplir l'espace
Ça sonne bien, je vais tester cela à un certain point et mise à jour de ma réponse, sauf si vous avez un exemple de lien que je puisse vérifier déjà.

OriginalL'auteur Tim Ogilvy
2

La solution la plus propre que j'ai trouvé est l'ajout de cette css de votre image dans la diapositive:
```
object-fit: cover; 
overflow: hidden;
```
Vous pouvez même ajouter simplement en ligne pour la balise img:
```
<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">
```
Il y a une grande écriture-up qui montre des exemples de propriétés CSS3 et de leur impact sur l'image des proportions ici: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Cela a très bien fonctionné pour moi. Je suis l'aide de Fondations d'Échange dans mon Bootstrap carrousel, mais je n'étais pas heureux avec la façon dont mes images ont été écrasé et élargi lors du redimensionnement du navigateur. Merci!

OriginalL'auteur Ira Herman
1

Regardant dans Chrome, le défaut max-width: 100% semble pas être ce que vous voulez.

Dans votre CSS, vous pouvez ajouter à la déjà défini des règles pour obtenir le navigateur pour utiliser la valeur par défaut.
```
.carousel .item > img { max-width: none }
```
Il est intéressant de noter que vous spécifiez min-width: 100% combiné avec une absolue height, donc sur les grands écrans (comme le mien, qui est 1080p), il sera toujours déformer l'image si elle est trop large, et donc de changer le ratio d'aspect et de nouveau la distorsion de l'image.

OriginalL'auteur pickypg

OK, le mieux que je pouvais faire était de ce...

/* Carousel base class */
.carousel {
  height: auto;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 35;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    background:#e64c6c;
    border:.5px solid #e7c1af;
    overflow:hidden;
    padding:3px;
    min-height: 500px; 
}
.carousel-inner > .item > img {
    float:right;
    padding: 2px;
    padding-left: 3px;
    min-width: 500px;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #e7c1af;
}

OriginalL'auteur Ryan Fishel

0

Avec bootstrap 3.3.7, j'ai pu résoudre ce problème en supprimant simplement la "hauteur" de la ligne dans carousel.css ici:
```
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}
```
OriginalL'auteur bfredo123

Vous devez vous connecter pour publier un commentaire.