web-dev-qa-db-fra.com

comment donner à l'image une largeur et une hauteur dynamiques lors de l'utilisation du système de grille responsive de bootstrap

J'utilise le système de grille de bootstrap et voici mon site web . Le problème est que lors du chargement initial, la carte objet a un aspect plutôt merdique:

enter image description here

et voici à quoi ça ressemble après le chargement:

enter image description here

Comme vous pouvez le constater, le problème vient du fait que je ne fournis pas la largeur et la hauteur de l'image. Par conséquent, avant qu'il ne se charge, je vois cette mise en page étrange qui n'est pas bonne. La raison pour laquelle je ne fournis pas de largeur ni de hauteur est due au fait que cela réagit, de sorte que lorsque je redimensionne la largeur du navigateur, la largeur de la carte change également et que fournir une largeur et une hauteur constantes ne fonctionne pas. Quelle est la meilleure solution?

htmlcsscss3twitter-bootstraptwitter-bootstrap-3
10
adit

Vous pouvez calculer votre rapport d'image s'il est connu, puis réglez son remplissage sur le rapport.

Découvrez le js fiddle:

http://jsfiddle.net/J8AYY/7/

<div class="img-container">
    <img src="">
</div>

.img-container {
    position:relative;
    padding-top:66.59%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

Donc, si votre image a une largeur de 2197 pixels et une hauteur de 1463 pixels

puis définissez le conteneur contenant l'image sur padding-top 1463/2197 * 100% puis définissez votre image sur position absolue.

14
Chihung Yu

Vous devez placer vos vignettes dans un conteneur de taille dynamique, dont la hauteur est proportionnelle à sa largeur. Vous pouvez le faire en faisant correspondre width et padding-bottom sur le conteneur, ainsi que quelques autres détails, comme dans Bootply et l'exemple ci-dessous:

Bootply

Exemple:

CSS: 

.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%; <!-- matching this to above makes it square -->
     float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

HTML:

<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
  <div class="row">

  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo" /> <!-- No Photo, but it still scales -->
      </div>
    </div>  
</div>

Vous remarquerez que dans la dernière vignette, même si aucun fichier n'est chargé, le conteneur est carré. C'est la clé qui résoudra votre problème spécifique.

Remarque: la correspondance de padding-bottom à width vous donnera un conteneur de vignettes carrées, mais vous pouvez le définir à votre guise en ajustant le padding-bottom %.

Note2: parce que vous n'avez pas partagé votre code, vous devrez probablement renommer et tester plusieurs classes pour que cela fonctionne. Je devais deviner votre configuration en fonction de ce que j'ai vu sur votre site. J'espère que ça aide!

3
Shawn Taylor

Si vous travaillez avec des images de la même taille, vous pouvez définir une hauteur minimale sur l’élément d’image pour chaque étape de la page sensible. Vous devez savoir quelle est la hauteur des images à chaque étape de la conception de la page en réponse, mais cela pourrait ressembler à ceci:

.item-card img {
  min-height: 100px;
}

// Small screen
@media (min-width: 768px) {
  .item-card img {
    min-height: 150px;
  }
}

// Medium screen
@media (min-width: 992px) {
  .item-card img {
    min-height: 200px;
  }
}

// Large screen
@media (min-width: 1200px) {
  .item-card img {
    min-height: 250px;
  }
}
1
theJoeBiz

Si j'ai bien compris votre question, vous souhaitez que l'image s'ajuste automatiquement lorsque le navigateur est redimensionné. Nous pouvons y parvenir en utilisant le fichier css ci-dessous.

.image-box img {
    width: 100%; 
}

Si nous spécifions seulement la largeur de l'image, la hauteur sera calculée automatiquement. Il maintiendra le rapport d'aspect de l'image. Largeur 100% s'adaptera exactement au conteneur de l'image. Ce code peut ne pas fonctionner pour l'image de fond.

1
kundan Karn

Votre problème est qu’au moment du chargement, la img a une hauteur = 0 et une largeur = 100%. Donc, vous avez une image vide lors du chargement de la page.

Vous pouvez envisager d’utiliser un préchargeur d’image:

Si vous voulez que toutes les images aient la même hauteur, utilisez le plugin Fake Crop jQuery. En réalité, le fichier image n'est pas recadré, mais l'image obtient un effet "recadré" à l'aide des propriétés de positionnement CSS.

En outre, vous pouvez affecter un min-height au conteneur:

 .product-view .img-responsive {min-height:352px; background:#fff;}

Vous pouvez également regarder dans Chargement paresseux:

0
Wissam El-Kik
   use bootstrap or @media queries

  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { ... }

 /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { ... }

   /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

      We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

     http://getbootstrap.com/css/#grid
0
Kisspa