Twitter Bootstrap Auto Redimensionner l'image pour prendre toute la colonne
Je suis en utilisant bootstrap et j'ai une ligne avec deux colonnes. L'une des colonnes a une image qui doit occuper tout l'espace dans la colonne. La colonne sur la droite a trois lignes avec 2 photos dans chaque ligne. Mais jusqu'à présent, je ne peux pas obtenir l'image sur la gauche pour redimensionner correctement et reste simplement à une petite taille fixe.
Voici le code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom2.css" rel="stylesheet">
</head>
<body>
<div class="col-md-12">
<div class="row">
<h2>Recent</h2>
<div id="myGallery" class="col-md-7">
<a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
<br>
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
<br>
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
et mon css
img
{
max-width:auto;
max-height:auto;
}
J'ai été en mesure de définir une largeur minimale comme
.myClass img{
min-width: 775px;
}
mais si la fenêtre du navigateur, les changements de taille alors qu'il reste de la même taille et n'a pas l'air aussi bon.
Voici à quoi il ressemble actuellement
Et il devrait ressembler à ceci
Comment puis-je corriger cela dans le css?
Merci pour l'aide!
source d'informationauteur Andrew | 2014-07-28
Vous devez vous connecter pour publier un commentaire.
Vous devez simplement régler l'image à une largeur de 100%. Qui font de l'élément prendre 100% de la largeur du conteneur, il est à l'intérieur:
Utilisation de Bootstrap est
img-responsive
classe.