Comment créer une image réactive dans twitter bootstrap 3

Question

Je suis actuellement en utilisant twitter bootstrap 3 et je suis confronté à un problème pour créer une image réactive. Je l'ai utilisé, img-responsive classe. Mais la taille de l'image n'est pas mise à l'échelle. Si j'utilise width:100% au lieu de max-width:100% alors qu'il fonctionne parfaitement. Où est le problème? C'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>

Answer 1

Bootstrap est sensible de l'image de la classe des ensembles max-width à 100%. Cela limite sa taille, mais ne force pas pour l'étirer pour remplir les éléments de parent plus grand que l'image elle-même. Vous devez utiliser l'attribut width de la force de l'upscaling.

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

Answer 2

Vous ne savez pas si il vous aide toujours... mais j'ai dû faire une petite astuce pour rendre l'image plus grande, mais en gardant de répondre

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

}

J'espère que ça aide P. S. La largeur maximale peut être quelque chose que vous aimez

Answer 3

Si le réglage de largeur fixe sur l'image n'est pas une option, voici une solution alternative.

Avoir un div parent avec display: table et table-layout: fixe. Puis réglage de l'image display: 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/

Answer 4

J'ai trouvé que vous pouvez mettre la .le col de la classe sur l'image fera le tour - cependant, ce qui donne un rembourrage supplémentaire le long de avec d'autres attributs associés à la classe comme flotteur gauche, toutefois, le contrat peut être résilié par dire par exemple un pas de rembourrage classe comme une outre.

Answer 5

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

Il va travailler à l'intérieur des résolutions plus faibles comme les tablettes. Lorsque vous avez résolution de 1280 X 800 force plus grande qu'il y a aussi de la largeur de 100 %. Peut-être que CSS à l'intérieur de requête de média comme des icônes de polices est la meilleure solution.