Réactif largeur carrousel dans le Bootstrap 3 min de la hauteur et de recadrage automatique

Pour créer une pleine largeur de carrousel dans le Bootstrap 3, je l'ai placé directement en ligne, sans emballage conteneur. Le carrousel s'étend parfaitement à la pleine largeur de l'écran et des échelles de téléphone au format. Mais voici le problème: parce que le mouvement est un 100% de largeur, le carrousel des échelles de trop sur le téléphone (320 px de large): il est techniquement correct, mais ce serait bien si la hauteur était plus élevé.

Question: comment définir une hauteur minimale de conserver les proportions de l'image et de la culture de gauche et de droite sur la largeur minimale?

Merci de partager une partie de votre code, il sera plus facile pour les gens à vous aider si ils peuvent voir ce que vous avez déjà essayé, que pour eux d'essayer de reproduire le problème à partir de zéro.

OriginalL'auteur user2969467 | 2013-11-08

  1. 3

    J'ai mis le carrousel-intérieure afin d'être plus large que l'écran, avec une marge négative. Cela rend le carrousel de débordement et de paraître plus grande et plus étroit, effectivement recadrage gauche et à droite. Sur de plus grands écrans, j'ai réglé le retour à la normale pour la totalité de l'image à apparaître. Enfin, assurez-vous d'avoir overflow: hidden; sur le bon élément parent, de sorte que les utilisateurs mobiles n'ont pas l'expérience involontaire de côté-défilement.

    .carousel-inner{
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px){
  .carousel-inner{
    width: 100%;
    margin: 0;
  }
}
    J'ai trouvé j'avais besoin de jusqu'à 200%, ce qui signifiait qu'il était utile d'ajouter ceci: .carousel-caption { droite: 30%; left: 30% } @media (min-width: 768px){ .carousel-caption { droite: 15%; à gauche: 15% } } - les 30%, c'est parce que 200% est deux fois 100%, donc 30% est deux fois 15%.

    OriginalL'auteur ntrrobng

  2. 1

    Votre img largeur est de 100%, quand il largeur de l'échelle de l'échelle de la hauteur, vous pouvez résoudre ce problème avec
    .carrousel-intérieur > .item > > img {max-width:200%} et les requêtes de média

    ou même ceci: Twitter Bootstrap: Avez-carrousel des images plein la largeur et la hauteur

    OriginalL'auteur Aleksandar Alex Perisic