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;"时，它可以正常工作，但没有按照我的意愿进行响应，是否有更好的方法来制作更好的专辑{ images-list}使用bootstrap？

Answer 1

您的图片响应从某种意义上说，它们会根据父母的大小缩小以下是Bootstrap 3中定义.img-responsive的方法：

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

请注意，正如Sreemat所指出的那样，您不需要将图像包装在<div>中，因为它们已经有display:block。

问题在于大多数人，当他们说responsive他们还希望它根据父母的宽度增加， .img-responsive不会这样做 ，因为这样做有可能使小图片看起来真的坏。

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

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

响应式图像组

1 个答案: