我想在我的页面上显示多个图像，并满足以下要求：
他们都适合身高
它们都在一条线上，必要时按宽度裁剪
反射会很好
我让它使用background-image, 和以下结构工作：
<!-- row images -->
<div class="row-fluid">
<div class="span12" id="cover_pictures">
<div class="images1">
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div> </div>
</div>
<!-- row for reflections, php generated -->
<div class="row-fluid">
<div class="span12 hidden-phone" id="cover_reflections">
<div class="images1">
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
以及以下 CSS ：
#cover_pictures .images1 {
height:350px;
}
#cover_reflections .images1 {
height:100px;
}
.images1 {
width:100%;
}
.images2 {
/* top for reflections, doesnt matter for pictures*/
background-position:center top;
background-repeat:no-repeat;
background-size:auto 100%;
float:left;
height:100%;
overflow: hidden;
margin:0px 0%;
}
使用这个 JS 来调整.images2div 的大小：
var l = dataJson.length; // number of images
var margTot = 5; // 5% of the space for margins
$(".images2").css("margin-left", margTot / 2 / l + "%");
$(".images2").css("margin-right", margTot / 2 / l + "%");
$(".images2").css("width", (100 - margTot)/l + "%");
问题是：从 PHP 加载反射非常慢，生成的图像太大，所以我想使用 Reflection.js。此脚本仅适用于<img />，不适用于background-image，但我似乎无法使用<img />元素制作相同的布局。图像失真，如果不是，它们仅适合宽度等。
我不是 html/css 方面的专家，所以对你们中的一些人来说似乎很容易，但请确保任何答案都将不胜感激！如果您需要更多详细信息，请随意询问，我可能已经忘记了一些。
如果我能让它轻松工作，我计划将它作为 jQuery 插件发布到 GitHub 上。
编辑：图像列表填充了 JSON API，给了我图像的 URL 和大小。我无法调整服务器上的图像大小，因为网页上的图像数量不同。
编辑：对未来的读者：我想奖励这个问题的两个很好的答案，所以我做了以下
我向 Troy Alfrod 授予了赏金，因为他的回答非常详细且好看
我验证了 Vals 的解决方案，因为它设置简单
对于我自己的场景，我决定暂时采用最简单的答案，因为实施和测试的延迟非常短。这是我所做的：
两者都
#cover_pictures > .images2包含#cover_reflections > .images2相同的 divbackground-image和相同的样式（不再reflect.php）添加
transform: scaleY(-1);（以及其他浏览器的等效项）到#cover_reflections > .images2将大小限制
#cover_reflections为100px添加了
.maskdiv Vals 建议。
它工作得很好，除了在 IE7-8 中，因为它不支持background-size属性。所以我在 php 中添加了一个后端，以正确的高度发送每个图像（支持缓存等）。那不是计划的一部分，但我必须这样做。这样检索所需的高度var height = $('#cover_pictures .images1').height();
希望它会帮助别人！
设置时，我将在此处发布指向 jQuery 插件的链接。
