Question

我想以本网站使用的方式显示一系列图像缩略图（我相信是SquareSpace主题）：http://hellomattstevens.com/

我也在使用Bootstrap作为我网站的框架。什么是实现这一目标的最轻，最简单的解决方案？

谢谢！

修改

<div class="container-fluid">
    <div class="row">
        <ul>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
            <li><a href=""><img src="someimage.png"></a></li>
        </ul>
    </div>
</div>

这里的挑战是动态调整图像大小，以便在整个窗口中不断出血。

Answer 1

Bootstrap提供了一个流体宽度布局选项，可让您全宽。看看他们的Docs的流体容器部分：

http://getbootstrap.com/css/#grid-example-fluid

<div class="container-fluid">
    <div class="row">
        ...
    </div>
</div>

然后，您可以将其与缩略图代码结合使用来布置图像：

http://getbootstrap.com/components/#thumbnails

Answer 2

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
      <div class="row img-height">
       <img rsc="image path" alt="" class="img-responsive">
      </div>
    </div>
    <div class="col-md-4">
      <div class="row img-height">
       <img rsc="image path" alt="" class="img-responsive">
      </div>
    </div>
    <div class="col-md-4">
      <div class="row img-height">
       <img rsc="image path" alt="" class="img-responsive">
      </div>
    </div>
</div>

.img-height {
 max-height: 300px;
}

根据窗口大小，全出血动态调整图像缩略图的大小

2 个答案: