Question

我正在使用bootstrap框架，我希望有3个图像，如下面的jsfiddle链接所示，当窗口大小改变/监视器大小太小而无法显示完整大小的图像时，在响应庄园中行动。重要的是图像保持在同一条线上（如果可能），两者之间没有间距。

<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

在图像标签中添加一个类，不要忘记添加引导程序！只要确保你链接bootstrap，你就可以使用这个免费的CDN：

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

并添加类

class="img-responsive"

到你的img标签。

JSFiddle

编辑：如果您希望图片位于同一行，只需创建几个div。首先，创建一个父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;的每个图像之间添加div，如下所示：

<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

将图像包裹到某些网格/列（例如.col-*）并使这些图像填充100％的可用空间（.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/

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

响应式图像 - Bootstrap

2 个答案: