Я использую bootstrap, и у меня есть строка с двумя столбцами. Один из столбцов имеет одно изображение в нем, которое должно занимать все пространство в столбце. Столбец справа имеет три строки в нем с двумя картинками в каждой строке. Но пока я не могу получить изображение слева, чтобы правильно изменить размер и просто остался на небольшом фиксированном размере. Вот код.
<!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 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>
и мой css
img
{
max-width:auto;
max-height:auto;
}
Я смог установить для него минимальную ширину, например
.myClass img{
min-width: 775px;
}
но если размер окна браузера изменится, он останется того же размера и выглядит не так хорошо.
Вот что он сейчас выглядит
И это должно выглядеть так
Как я могу это исправить в css? Спасибо за помощь!