我正在寻找一种方法来显示各种宽度和高度的图片库，以便它们之间没有任何空格。
类似于这个解决方案，但与 IE 兼容，并且更喜欢水平行而不是垂直列：http://css-tricks.com/seamless-responsive-photo-grid/
插件或类似的失败，有没有人有任何关于如何实现这一点的信息？我已经用一点 PHP 对它进行了抨击，并想出了如何将图像按比例缩放到给定的最大行高并跟踪剩余的空间，但是当你得到的图像短于最大值（您仍然会得到一些空白）。
一个想法是只显示图像，然后使用 jQuery 来缩放它们（使用宽度/高度属性），这样我就可以获取 y 图像并计算出如何将它们放入一行x 像素宽。
不缺少肘部润滑脂，只需要朝正确的方向轻推即可。任何帮助表示赞赏
【问题讨论】：
标签： php jquery image image-scaling
好的，所以首先你应该在脑海中将空间标记为网格。所以，你的“画布”是 x 单位宽和 y 单位高。现在，将图像分配到一个结构中，该结构包含它的 x,y 起点，以及它的宽高单位数。
现在有趣的部分 - 如何执行 使用 php 我会创建一个数组，如
$images = array( array(x1_1, y1_1, length_1, width_1, src_1)
array(x1_2, y1_2, length_2, width_2, src_2))
这将告诉您将图片打印到屏幕上所需了解的所有信息。
echo "<div id=\"myDiv\">;
foreach($images as $i){
echo "<img src=\"{$i[5]}\" height=\"{$i[3]}\" width=\"{$i[4]}\" x1=\"{$i[0]}\ y1=\"{$i[1]}\">";
echo "</div>";
此时我将使用 jQuery 通过将属性乘以比例来修改高度和宽度元素。
$(document).ready(function(){
var scale = 30; //30 pixels maybe?
//I'm not a jquery ninja, so please assume my syntax is wrong
$("#myDiv").children().each(function(){
this.attr("height", this.attr("height")*scale);
this.attr("width", this.attr("width")*scale);
});
})
现在根据 x1 和 y1 属性将图像放置在正确的位置
$(document).ready(function(){
var scale = 30; //30 pixels maybe?
//I'm not a jquery ninja, so please assume my syntax is wrong
$("#myDiv").children().each(function(){
this.css('property', value);
});
})
【讨论】：
我一直在努力得到你想要的东西。我也看了 Chris Coyier 的无缝照片网格，在我引入过滤时遇到了一些问题。
您可以在 stackoverflow 上查看我关于 css-column 无缝照片网格 here 和 here 的问题/答案。
然后，我尝试了一种 javascript 方法，在流体环境中使用 jQuery Masnory。您可以在 this stackoverflow 帖子中了解如何做到这一点。
它有效，但我仍在试图弄清楚为什么图像之间存在垂直间隙。
所以我的回答是，如果您想要一种 javascript 方法，请使用 Masonry，但也请注意，我从未见过无缝且响应迅速的照片实现。我还在找。
【讨论】：