如何在较小的媒体上处理引导程序中的响应式图像？答案

【问题标题】：How to handle responsive image in bootstrap on smaller media?如何在较小的媒体上处理引导程序中的响应式图像？
【发布时间】：2014-04-20 16:55:51
【问题描述】：

您好，我是使用引导程序的新手，我不太擅长在引导程序中处理响应式图像。

这是我的问题。

我在 992px 上有这样的图像结果格式：

但是当我将屏幕宽度更改为较小的媒体（例如：520 像素）时，图像会对齐，其中没有间隙。

变成这个样子。

我想要这样的，里面有填充（间隙）。

这是我的 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>

这里是 CSS：

#first
{
padding:20px;
}

#second
{
padding:20px;
}
#third
{
padding:20px;
}
#forth
{
padding:20px;
}

And this is its fiddle

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用两组图像。

<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>

css 可以是这样的：

.img-responsive {
    width: 100%;
}

在这种情况下使用 2 个集合是一个不错的选择，因为将 640x450 图像的大小重新调整为 700x450 会改变其纵横比。您可以在此处阅读有关引导程序提供的响应式实用程序的更多信息： http://getbootstrap.com/css/#responsive-utilities

【讨论】：

那不是这样做的——这样一些浏览器会加载所有的图像，导致带宽浪费。更好的方法是使用 picturefill 之类的内容以及良好的备用图片。

【解决方案2】：

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;
  }
}

这只是一个例子。根据您的需要准确更改查询宽度。

【讨论】：