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

J'utilise actuellement Twitter Bootstrap 3 et je rencontre un problème pour créer une image responsive. J'ai utilisé la img-responsiveclasse. Mais la taille de l'image n'augmente pas. Si j'utilise à la width:100%place, max-width:100%cela fonctionne parfaitement. Où est le problème? Voici 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>

La classe d'image réactive de Bootstrap est définie max-widthsur 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 devrez utiliser l' widthattribut pour forcer la mise à l'échelle.

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

Bien sûr les choses!

.img-responsive est le bon moyen de rendre les images réactives avec bootstrap 3 Vous pouvez ajouter une règle de hauteur pour l'image que vous souhaitez rendre responsive, car avec la responsabilité, la largeur change le long de la hauteur, corrigez-la et vous y êtes.

Je ne sais pas si cela vous aide encore ... mais j'ai dû faire une petite astuce pour agrandir l'image tout en la gardant réactive

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

}

J'espère que cela aide PS La largeur maximale peut être tout ce que vous aimez

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: fixe. Ensuite, définissez l'image à afficher: table-cell et max-width à 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/

Essayez ce qui suit dans votre feuille de style CSS:

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

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;  
}

J'ai trouvé que vous pouvez mettre la classe .col sur l'image fera l'affaire - cependant, cela lui donne un rembourrage supplémentaire avec tous les autres attributs associés à la classe tels que float left, mais ceux-ci peuvent être annulés par exemple, sans remplissage classe en plus.

Je suppose que l'image est corrompue. Exemple: la taille de l'image est de 195px X 146px.

Il fonctionnera dans des résolutions inférieures comme les tablettes. Lorsque vous avez une résolution de 1280 X 800, cela forcera plus car il y a aussi une largeur de 100%. Peut-être que CSS à l'intérieur des requêtes multimédias comme les polices d'icônes est la meilleure solution.