响应图像 - Bootstrap

Question

我正在使用 bootstrap 框架，当 window 大小 [=19] 时，我希望有 3 张图像，如下面的 jsfiddle link 中所示=] 尺寸太小，无法显示完整尺寸的图像。重要的是图像保持在同一行（如果可能的话），中间没有间距。

<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">

谢谢

https://jsfiddle.net/mztyoy7q/

Answer 1

在图像标签中添加 class，不要忘记添加 bootstrap！只要确保你 link bootstrap，你就可以使用这个免费的 CDN：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

并添加 class

class="img-responsive"

到您的 img 标签。

JSFiddle

编辑： 如果您希望图像在同一行，只需创建几个 divs。首先，创建父级 div、

<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>

此 div 元素将为红色，宽度为 100%，并自动调整高度。然后在每个具有 float:left; 样式的图像之间添加 divs，如下所示：

<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
</div>

这是更新后的 JSFiddle 如果有效，请告诉我！

Answer 2

将您的图像包装成一些 grid/columns（例如 .col-*），并使这些图像填充 100% 可用 space（.img-responsive）。这是一种简洁而优雅的方式，仅使用 bootstrap:

<div class="row">
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
</div>

https://jsfiddle.net/tvv89L1j/1/

关于删除 space，最简单的方法就是添加您自己的样式来覆盖 bootstrap 添加的填充。您需要将列的 padding-left 和 padding-right 设置为 0（当然，您可以在浏览器检查器中查看填充的来源）。

响应图像 - Bootstrap

Responsive Images - Bootstrap

html

twitter-bootstrap

responsive