Html 响应图像-引导

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

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

谢谢

---

在图像标签中添加一个类，别忘了添加引导！ 只要确保您链接了引导，就可以使用此免费CDN：

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

并添加类

class="img-responsive"

到你的img标签

编辑：如果希望图像位于同一行，只需创建两个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>

---

这里是最新的，如果这个工作，请让我知道

将图像包装到一些网格/列（例如

.col-*

），并使这些图像填满100%的可用空间（

.img responsive

）。这是一种干净优雅的方法，只需使用引导：

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

---

关于删除空格，最简单的方法就是添加自己的样式来覆盖引导添加的填充。您需要为列设置

padding left

和

padding right

为

0

（当然，您可以在浏览器检查器中看到该填充的来源）。

为此标记添加一个类

class=“img responsive”

Hello mate，谢谢您的帮助。我已经试过了，但是你可以看到每个图像都在一条单独的线上，如果可能的话，我希望他们三个都在同一条线上，谢谢。添加一个包装div。让我来计算一下，这样我可以给你正确的JSFIDLE。非常感谢@invincible，这整晚都在做我的头。慢慢来，再次感谢！好了@Blobbyth先生这是完美无敌的，非常感谢你。最后一件事。我如何将div的内容居中，如本屏幕截图所示。

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