bootstrap comment faire une hauteur fixe sensible?

Comment puis-je faire une hauteur fixe de l'élément responsive avec bootstrap 3? Par exemple, j'ai mis le carousal hauteur au 650px. Mais je ne peux pas répondre comme les images ne. Une idée?

css,

#article-carousel .carousel-inner{
    height:650px;
}

html,

<!-- Carousel items -->
<div class="carousel-inner">

   <div class="active item">
     <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
   </div>
....

Avez-vous essayé de changer la hauteur de l'élément img au lieu de .carrousel-intérieure?
les images proviennent de différentes hauteurs donc j'ai envie de les recadrer en utilisant débordement caché...
Définir le img-responsive classe de hauteur:100% pour permettre à l'image de toute la hauteur.
Généralement vous faire des requêtes de média à partir de la plus petite min-largeur au plus grand min-width et définissez les hauteurs à l'intérieur.
J'ai amélioré la réponse stackoverflow.com/a/25981221/947687 en ajoutant css3 background-size. Il fonctionne dans tous les navigateurs sans javascript.

OriginalL'auteur laukok | 2014-09-22

13

Vous pouvez utiliser css3 objet-fit pour redimensionner votre image http://jsfiddle.net/xcoq9xxg/
```
img {
    height: 650px;
    width: 100%;
    object-fit: cover; //here
}
```
Il travaille pour Chrome et Opera. Utilisation de polyfill de la bibliothèque pour les autres: https://github.com/schmidsi/jquery-object-fit ou https://github.com/anselmh/object-fit.

Une autre façon est d'utiliser css3 fond de taille http://jsfiddle.net/dizel3d/rwdspudv/
```
.image {
    height: 650px;
    background-position: center;
    background-size: cover;
}
```
Il fonctionne dans tous les navigateurs sans javascript, mais vous devez l'utiliser <div> au lieu de <img>:
```
<div class="image" style="background-image: url('my-image.jpg')"></div>
```
Pas pris en charge que largement. Trop de rouge: caniuse.com/#feat=object-fit
Ok, utilisation de polyfill de la bibliothèque comme github.com/schmidsi/jquery-object-fit
J'ai amélioré la réponse en ajoutant css3 background-size.

OriginalL'auteur dizel3d
3

j'ai eu le même problème avec le réactif à hauteur fixe. J'utilise vh au lieu de px. Dans mon cas, il fonctionne comme un charme
```
img {
    height: 85vh;
    width: 100%;
    object-fit: cover; //here
}
```
OriginalL'auteur Nadine Fisch

Essayer :

.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }

ou,
Je pense que c'est mieux de le faire avec js ( avec bootstrap, nous allons utiliser jquery ) :

...
function init_carousel(){
    H = +($( window ).height()); //or $('.carousel-inner') as you want ...
    $('.img-responsive').css('height',H+'px');
}
init_carousel();
...

Dans ce cas, ajouter des div avec l'image d'arrière-plan, et votre css :

.carousel-inner > item { position: relative; overflow:hidden;  }
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; }
.carousel-inner > item > .img-responsive { witdh:auto; }

OriginalL'auteur pirs

          function Screensize() {
        try {
            var height = ((screen.height * 80) / 100);
            document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;");
        } 
        catch (ex)
        {  alert(ex); }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    }

OriginalL'auteur Ashish

0

vous aurez besoin de relooker carrousel de contrôle de la classe avec les médias de la requête
voici juste un exemple de code pour ajouter
```
 @media (max-width: 800px) {
    .carousel-control{
      height:350px;
    }
 }
```
OriginalL'auteur Majali

Vous devez vous connecter pour publier un commentaire.