html - 响应式图像组

Question

我一直在尝试使用 bootstrap 制作一组图像列表页面，但我无法使其对其他分辨率做出响应，图像向左移动，整个排列样式将中断。

<div class="fluid-container">
  <div>
    <img class="img-responsive" src="source-path">
  </div>
  <div>
    <img class="img-responsive" src="source-path">
  </div>
  <div>
    <img class="img-responsive" src="source-path">
  </div>
  <div>
    <img class="img-responsive" src="source-path">
  </div>
<div>

在这个 ^ 图像显示在 1 行中，而不是彼此相邻，当我使用 style="float: left;" 时它可以工作但没有像我希望的那样响应，是有没有更好的方法使用 bootstrap 制作更好的相册{images-list}？

Answer 1

您的图像响应。
从某种意义上说，它们确实会根据父级尺寸缩小。
这是如何.img-responsive在 Bootstrap 3 中定义:

display: block;
max-width: 100%;
height: auto;

请注意，如Sreemat很好地指出，您不需要将图像包装在 <div> 中因为他们已经有了 display:block .

问题是大多数人，当他们说 responsive他们还希望它的大小根据父级的宽度增长， .img-responsive不会这样做，因为这样做可能会使小图像看起来真的很糟糕。

但如果这是您想要的行为，请将其添加到您的 CSS 中:

.img-responsive {
  min-width: 100%:
}