我正在使用Wordpress和用户上传的图片。我正在尝试使用Bootstrap构建一个响应式图像库，但我遇到了一些问题：
Picture.png http://img339.imageshack.us/img339/6838/picturehq.png 也可以在jsfiddle上找到它，（确保将输出窗口设置得足够大，以便切换到多列）
一些现实挑战和一些限制因素：
width:100%; height:100% 我尝试过什么
我在响应式设计之前用来创建图像库的一个棘手的方法是让Wordpress创建两个图像大小，一个具有最大宽度，一个具有最大高度，两个都具有软裁剪，尺寸我希望画廊缩略图。生成库时，我会检查哪些没有溢出边界，然后使用该图像作为缩略图。另一种方法是使用接近我想要的大小的图像，然后将图像设置为background-url，用于位置设置为center/center的包含元素。这适用于固定宽度的设计，但它不能很好地响应！：）
另外，据我所知，响应式设计/ css无法设置背景图像的比例。使用<img>标记而不是通过CSS设置<div>的{{1}}来编码图像似乎在语义上更准确。
如果没有响应式设计，您可能也会有固定的列数，因此您可以在每个 图像上执行background-image以防止发生奇怪的包裹。但是，通过响应式设计，列数可能会从2,3,4等变化。
此外，如果没有响应式设计，您可以使用Javascript循环遍历图像/缩略图容器并标准化其高度。在响应式设计上执行此操作并非不可能，但您必须等待页面完全加载，因为高度设置为开始时的百分比，并且在加载所有资源之前可能不准确。然后你必须担心窗口调整大小或方向改变会发生什么。这似乎是一种黑客行为，而不是正确的做法。
我还尝试设置clear:left元素的min-height区域，并将包含图片的.thumbnail设置为<a>，并将其设置为display:block同样。结果更好，但仍然不是很好：
3栏： Picture.png http://img818.imageshack.us/img818/9472/picturemk.png
4栏：
Picture 1.png http://img525.imageshack.us/img525/706/picture1uh.png
答案 0 :(得分：1)
虽然不需要“完美尺寸的图片”，但对于纯CSS解决方案而言，它需要特定尺寸的li元素及其{{1} } overflow（以便图片的比率不会偏斜，但可能会被父hidden容器裁剪）。
将li元素与定义的li和float: left;一起设置为width可以实现统一的展示/分发，并且图库可以自我调整和根据窗口/父级的宽度进行回流 - height：
ul JS Fiddle demo (with float: left;)
（删除了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;
}
解决方案，因为它似乎不允许后代元素与具有display: inline-block属性的li绝对定位。）
如果可以使用JavaScript解决方案，还有jQuery-required Masonry（以及non-jQuery Masonry）和Isotope (requires jQuery)等。
虽然，如果您能够使用display的受限宽度以及有限的跨浏览器支持 compatibility ，您可以使用CSS列：
li