2

我正在使用 Wordpress 和用户上传的图片。我正在尝试使用 Bootstrap 构建响应式图片库，但遇到了一些麻烦：

Picture.png http://img339.imageshack.us/img339/6838/picturehq.png也可以在jsfiddle 上找到它，（确保将输出窗口设置得足够大，以便它们切换到多列）

一些现实世界的挑战和我的一些限制：

  • 图像不会都是相同的大小
  • 图像不必全部相同
  • 图库需要响应式（图像可以缩小/增长，可以从 2、3、4 列等更改）
  • 字幕可以是任意长度，并且应该自动截断/隐藏/等。
  • 我希望图像具有适当的纵横比，例如不width:100%; height:100%
  • 字幕应该以某种方式排列

我试过的

在响应式设计之前，我用来创建图像画廊的一种棘手方法是让 Wordpress 创建两种图像尺寸，一种具有最大宽度，另一种具有最大高度，两者都具有我想要的大小的软裁剪画廊缩略图。在生成图库时，我会检查哪些没有溢出边界，然后使用该图像作为缩略图。另一种方法是只使用接近我想要的大小的图像，然后将图像设置background-url为位置设置为的包含元素的a center/center。这适用于固定宽度的设计，但不适用于响应式！:)

另外，据我所知，响应式设计/ css 无法设置背景图像的比例。<img>使用标签而不是通过 CSS<div>的集合来编码图像似乎在语义上更准确。background-image

如果没有响应式设计，您可能还会有固定的列数，因此您可以clear:left在每 n个图像上执行一次，以防止发生奇怪的包装。但是通过响应式设计，列数可能会从 2、3、4 等变化。

此外，如果没有响应式设计，您可以使用 Javascript 循环遍历图像/缩略图容器并标准化它们的高度。在响应式设计上执行此操作并非不可能，但是您必须等待页面完全加载，因为高度设置为以百分比开始，并且在加载所有资源之前可能不准确。然后，您必须担心窗口大小调整或方向更改会发生什么。这似乎是一种技巧，而不是正确的方法。

我还尝试设置元素的min-height区域并将包含图像的区域设置为以及将其设置为具有。结果更好，但仍然不是很好：.thumbnail<a>display:blockmin-height

3栏： 图片.png http://img818.imageshack.us/img818/9472/picturemk.png

4列：

图片1.png http://img525.imageshack.us/img525/706/picture1uh.png

那么，如果没有完美尺寸的图像，如何创建一个好看的响应式图像库呢？

4

1 回答 1

1

虽然这不需要“完美尺寸的图像”，但对于纯 CSS 的解决方案，它确实需要特定尺寸的li元素，以及它们的overflowto hidden（这样图像的比例不会歪斜，尽管它可能会被裁剪由父li容器）。

将li元素 设置为float: left;与定义相结合width并height允许统一的呈现/分布，画廊能够根据窗口/父级的宽度自适应和重排ul：

li {
    width: 160px;
    height: 160px;
    padding: 4px;
    float: left;
    position: relative;
    overflow: hidden;
}

li p {
    position: absolute;
    color: #fff;
    opacity: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 -1px 0;
}

li:hover p {
    opacity: 1;
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
    -webkit-transition: all 1s linear;
}

JS Fiddle 演示（带float: left;）。

（删除了display: inline-block解决方案，因为它似乎不允许后代元素相对于li具有该display属性的 进行绝对定位。）

如果 JavaScript 解决方案是可能的，那么还有jQuery-required Masonry (and non-jQuery Masonry ) 和Isotope (requires jQuery)等等。

虽然，如果您能够忍受lis 的受限宽度，并且跨浏览器支持兼容性有些受限，您可以使用 CSS 列：

ul {
    -moz-column-width: 160px;
    -moz-column-gap: 0;
    -ms-column-width: 160px;
    -ms-column-gap: 0;
    -o-column-width: 160px;
    -o-column-gap: 0;
    -webkit-column-width: 160px;
    -webkit-column-gap: 0;
    column-width: 160px;
    column-gap: 0;
}

JS 小提琴演示。

于 2012-11-18T14:04:24.323 回答