twitter-bootstrap 如何在较小媒体上的引导程序中处理响应式图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22421283/
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
How to handle responsive image in bootstrap on smaller media?
提问by xitas
Hi I am new in using bootstrap and I am not very good handling responsive image in bootstrap.
嗨，我是使用引导程序的新手，我不太擅长在引导程序中处理响应式图像。
So here is my question.
所以这是我的问题。
I have images result formation like this on 992px:
我在 992px 上有这样的图像结果格式：
but when I change my screen width to smaller media (e.g:520px) the images come in line with no gaps in it.
但是当我将屏幕宽度更改为较小的媒体（例如：520px）时，图像会对齐，没有间隙。
It become like this.
就变成这个样子了。
I want it like this with padding(gaps) in it.
我希望它像这样带有填充（间隙）。
here is my HTML 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>
And here is CSS:
这是 CSS：
#first
{
padding:20px;
}
#second
{
padding:20px;
}
#third
{
padding:20px;
}
#forth
{
padding:20px;
}
采纳答案by Andrei Konstantinov
Bootstrap don't wan't to increase your images sizes- that's the deal.
Easy way to solve the problem:
use this meta-tag <meta name="viewport" content="width=device-width, initial-scale=1">
and media queries, like this:
Bootstrap 不会增加您的图像大小 - 这就是交易。
解决问题的简单方法：
使用此元标记<meta name="viewport" content="width=device-width, initial-scale=1">
和媒体查询，如下所示：
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 700px;
height: auto;
}
}
It's just example. Change exactly width of query for your need.
这只是例子。根据您的需要准确更改查询的宽度。
回答by Ishu Madan
You can use two sets of images.
您可以使用两组图像。
<div id="first" class="row">
<div class="col-md-8">
<img src="http://placehold.it/640x450" class="img-responsive hidden-xs hidden-sm">
<img src="http://placehold.it/700x450" class="img-responsive visible-xs visible-sm">
</div>
<div class="col-md-4">
<img src="http://placehold.it/300x450" class="img-responsive hidden-xs hidden-sm">
<img src="http://placehold.it/700x450" class="img-responsive visible-xs visible-sm">
</div>
</div>
And the css can go like:
css 可以是这样的：
.img-responsive {
width: 100%;
}
It will be a good option to use 2 sets in this case because re-sizing a 640x450 image to 700x450 will alter its aspect ratio. You can read more about responsive utilities provided by bootstrap here: http://getbootstrap.com/css/#responsive-utilities
在这种情况下使用 2 组将是一个不错的选择，因为将 640x450 图像的大小重新调整为 700x450 会改变其纵横比。您可以在此处阅读有关 bootstrap 提供的响应式实用程序的更多信息：http: //getbootstrap.com/css/#responsive-utilities
