jQuery Twitter Bootstrap 自动调整图片大小以占据整列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24996219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Auto Resize Picture to take up entire column
提问by Andrew
I'm using bootstrap and I have a row with two columns. One of the columns has one picture in it which should take up all of the space in the column. The column on the right has three rows in it with 2 pictures in each row. But so far I can't get the image on the left to resize correctly and just stays at a small fixed size. Here is the code.
我正在使用引导程序，我有一排两列。其中一列有一张图片，应该占据列中的所有空间。右边的列有三行，每行有 2 张图片。但到目前为止，我无法让左侧的图像正确调整大小，只能保持较小的固定大小。这是代码。
<!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>
and my css
和我的 css
img
{
max-width:auto;
max-height:auto;
}
I have been able to set a minimum width for it like
我已经能够为它设置一个最小宽度
.myClass img{
min-width: 775px;
}
but if the browser window size changes then it stays the same size and doesn't look as good.
但是如果浏览器窗口大小发生变化，那么它会保持相同的大小并且看起来不那么好。
Here is what it currently looks like
这是它目前的样子
And it should look like this
它应该是这样的
How do I go about fixing this in the css? Thanks for the help!
我该如何在 css 中解决这个问题？谢谢您的帮助！
回答by DavidG
You should just set the image to have a width of 100%. That make the element take 100% of the width of the container it is inside:
您应该将图像设置为宽度为 100%。这使元素占据其内部容器宽度的 100%：
img {
width: 100%;
}
回答by Daniel Apt
Use Boostrap's img-responsiveclass.
使用 Boostrap 的img-responsive类。
