html - 响应式图像 - Bootstrap

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 ! 只要确保您链接了 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%，并自动调整高度。 然后在每个图像之间添加 div，样式为 float:left;，如下所示:

<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如果可行，请告诉我!