Comment gérer l'image réactive dans le bootstrap sur les petits médias?
Salut, je suis nouveau dans l'utilisation de bootstrap et je ne suis pas très bonne tenue de route réactive de l'image dans le bootstrap.
Voici donc ma question.
J'ai des images entraîner la formation de ce genre sur le 992px:
mais lorsque je change la largeur de l'écran pour les petits médias (e.g:520px) les images sont en ligne, sans lacunes.
Il devenir comme cela.
Je le veux comme ça avec rembourrage(lacunes) en elle.
voici mon code HTML:
<!--two columes 3/1-->
<div id="first" class="row">
<div class="col-md-8"><img src="http://placehold.it/640x450" class="img-responsive"></div>
<div class="col-md-4"><img src="http://placehold.it/300x450" class="img-responsive"></div>
</div>
<div id="clean">
<!--two columes 3/1-->
<div id="second" class="row">
<div class="col-md-8">
<img src="http://placehold.it/640x100" class="img-responsive">
<br>
<br>
<img src="http://placehold.it/640x330" class="img-responsive"></div>
<div class="col-md-4"><img src="http://placehold.it/300x470" class="img-responsive"></div>
</div>
<!--two columes half half-->
<div class="row" id="third">
<div class="col-md-6"><img src="http://placehold.it/470x470" class="img-responsive"></div>
<div class="col-md-6"><img src="http://placehold.it/470x470" class="img-responsive"></div>
</div>
<!--four columes-->
<div class="row" id="forth">
<div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3"><img src="http://placehold.it/250x250" class="img-responsive"></div>
</div>
Et voici le CSS:
#first
{
padding:20px;
}
#second
{
padding:20px;
}
#third
{
padding:20px;
}
#forth
{
padding:20px;
}
Vous devez vous connecter pour publier un commentaire.
Bootstrap n'est pas wan pas à augmenter vos dimensions des images - c'est le contrat.
Une façon simple de résoudre le problème:
l'utilisation de cette méta-tag
<meta name="viewport" content="width=device-width, initial-scale=1">
et les demandes des médias, comme ceci:
C'est juste un exemple. Modifier exactement la largeur de la requête pour votre besoin.
Vous pouvez utiliser deux jeux d'images.
Et le css peut aller comme:
Ce sera une bonne option pour utiliser 2 jeux dans ce cas, parce que re-dimensionnement d'un 640x450 image de 700x450 va modifier ses proportions.
Vous pouvez lire plus au sujet sensible des utilitaires fournis par bootstrap ici:
http://getbootstrap.com/css/#responsive-utilities