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

【问题标题】：Resize image thumbnails dynamically based on window size, full-bleed根据窗口大小动态调整图像缩略图大小，全出血
【发布时间】：2014-03-27 18:59:42
【问题描述】：

我想以本网站上使用的方式显示一系列图像缩略图（我相信是 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>

这里的挑战是图像的动态调整大小，以使整个窗口持续流血。

【问题讨论】：

查看他们的页面的源代码，看看他们是如何做到的，查看嵌入和包含的脚本，并尝试实现它
到目前为止您尝试过什么？你遇到了什么问题？你有代码要分享吗？
压缩代码比较难看...

标签： javascript css image twitter-bootstrap

【解决方案1】：

Bootstrap 提供了一个流畅的宽度布局选项，让您可以使用全宽。查看他们文档的流体容器部分：

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

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

然后您可以将其与他们的缩略图代码结合使用来布局您的图像：

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

【讨论】：

流体容器选项很棒，但我需要了解引用站点上的图像如何动态调整大小以保持页面的全宽跨度。
我认为你会在每个图像上添加 Bootstrap .img-responsive 类，从而允许它们响应地放大或缩小。上传时，所有图片都必须具有相同的大小和纵横比（可能是正方形）。
这是我最初走的路线，但它不起作用。图片不会根据窗口大小动态调整大小。

【解决方案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;
}

【讨论】：

很遗憾，这不会在页面上水平显示图像。