web-dev-qa-db-fra.com

Comment créer une image sensible qui évolue également dans Bootstrap 3

J'utilise actuellement Twitter bootstrap 3 et je rencontre un problème pour créer une image sensible. J'ai utilisé la classe img-responsive. Mais la taille de l'image n'augmente pas. Si j'utilise width:100% au lieu de max-width:100%, alors cela fonctionne parfaitement. Où est le problème? Ceci est mon code:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>
javascriptjqueryhtml5css3twitter-bootstrap
96
user2796803

La classe d'images réactives de Bootstrap définit max-width sur 100%. Cela limite sa taille, mais ne l'oblige pas à s'étirer pour remplir des éléments parents plus grands que l'image elle-même. Vous devez utiliser l'attribut width pour forcer la conversion ascendante.

http://getbootstrap.com/css/#images-responsive

83
isherwood

Bien sûr des choses!

.img-responsive est le bon moyen de rendre les images réactives avec bootstrap 3. Vous pouvez ajouter une règle de hauteur à l'image que vous souhaitez rendre réactive, car avec la responsabilité, la largeur change le long de la hauteur, te voilà.

18
Omar El Don

Je ne sais pas si cela vous aide encore ... mais je devais faire un petit truc pour agrandir l'image tout en la maintenant sensible

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

J'espère que ça aide P.S. La largeur maximale peut être ce que vous voulez

8
Gil

Si la définition d'une largeur fixe sur l'image n'est pas une option, voici une solution alternative.

Avoir un div parent avec display: table & table-layout: corrigé. Définissez ensuite l'image à afficher: table-cell et max-width sur 100%. De cette façon, l'image s'adaptera à la largeur de son parent.

Exemple:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Violon: http://jsfiddle.net/5y62c4af/

7
Bruno Fondevila

Essayez de le faire:

1) Dans votre index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) Dans votre style.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}
3
user3941146

Essayez ce qui suit dans votre feuille de style CSS:

.img-responsive{
  max-width: 100%;
  height: auto;
}
3
Xinoon

J'ai trouvé que vous pouvez mettre la classe .col sur l'image, mais cela lui donne un remplissage supplémentaire ainsi que tous les autres attributs associés à la classe, tels que float à gauche, mais ils peuvent être annulés, par exemple, par un remplissage nul. classe comme un ajout.

1
MikeyC