响应式图片 - Bootstrap

Question

我正在使用Bootstrap框架，希望像下面jsfiddle链接中展示的那样，在窗口大小改变或显示器太小无法显示全尺寸图像时，这3个图像能具有响应式。重要的是图像保持在同一行（如果可能的话），没有间隔。

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

Thanks

https://jsfiddle.net/mztyoy7q/

- MrBlobby

---

将一个类添加到这个标签 class="img-responsive"。 - Ankush Verma

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％，并自动调整高度。 然后在每个图像之间添加具有样式 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。如果这个可以用，请告诉我！

- InvincibleM

---

添加一个包装 div。让我想一想，这样我就可以为您提供正确的 jsfiddle。 - InvincibleM

非常感谢 @InvincibleM，这个问题困扰了我整个晚上。请您慢慢来，再次感谢！ - MrBlobby

太完美了，InvincibleM，非常感谢。最后一个问题。我该如何使div中的内容居中，就像这个截图中看到的一样：https://i.gyazo.com/c7ab68a828a3b7f84f6d5b37f905c4cf.png。 - MrBlobby

我无法准确地理解它。对不起。 - InvincibleM

没问题，第一部分完全符合要求。只需要将这三张图片居中，如果您解决了，请告诉我。谢谢。 - MrBlobby

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/

关于去除空格，最简单的方法就是添加自己的样式来覆盖Bootstrap添加的填充。对于列，您需要将padding-left和padding-right设置为0（当然，您可以在浏览器检查器中看到这个填充来自哪里）。

- kamyl