html - 定位、裁剪并向图像、网络添加反射

Question

我想在我的页面上显示多个图像，并满足以下要求:

• 他们的高度都合适

• 它们都在一条线上，必要时按宽度裁剪

• 有反射(reflection)就好了

我使用 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 调整大小 .images2分区:

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 和大小。我无法调整服务器上图片的大小，因为网页上的图片数量各不相同。

编辑:致 future 的读者:我想奖励关于这个问题的两个很好的答案，所以我做了以下

• 我将赏金授予了 Troy Alfrod，因为他的回答非常详细且好看

• 我验证了 Vals 的解决方案，因为它的设置简单

对于我自己的场景，我决定暂时使用最简单的答案，因为实现和测试的延迟非常短。这是我所做的:

• 两者 #cover_pictures > .images2和 #cover_reflections > .images2包含具有相同 background-image 的相同 div , 和相同的样式(不再是 reflect.php )

• 已添加 transform: scaleY(-1); (以及其他浏览器的等效项)到 #cover_reflections > .images2

• 限制了 #cover_reflections 的大小至 100px

• 添加了 .mask建议使用 div Vals。

它工作得很好，除了在 IE7-8 中，因为它不支持 background-size属性(property)。所以我在 php 中添加了一个后端，以正确的高度发送每个图像(支持缓存等)。那不是计划的一部分，但我不得不这样做。这样检索所需的高度 var height = $('#cover_pictures .images1').height();

希望对其他人有帮助!!

设置时我会在这里发布 jQuery 插件的链接。

Answer 1

我已经为您制作了一个演示，具有简化的布局，但我认为这个想法还可以:

HTML 是:

<div class="row-fluid">
    <div class="span12" id="cover_pictures">
    <div class="images1">
        <div class="images2" id="img1"></div>
        <div class="images2" id="img2"></div>
        <div class="clearfix"></div>
    </div>  </div>
</div>
<div class="row-fluid">
    <div class="span12" id="cover_reflections">
    <div class="ref1">
        <div class="ref2" id="img1"></div>
        <div class="ref2" id="img2"></div>
        <div class="mask"></div>
    </div>  </div>
</div>

与您已有的差别不大。

我在反射行中添加了一个 mask div，以产生阴影效果。

CSS 是

#cover_pictures .images1 {
    height:350px;
}
#cover_reflections .ref1 {
    height:100px;
}
.images1, .ref1 {
    width:100%;
}
#img1 {
    width: 200px;
    background-image: url(http://placekitten.com/200/300);
}
#img2 {
    width: 250px;
    background-image: url('http://placekitten.com/250/300');
}
.images2, .ref2 {
    background-repeat:no-repeat;
    float:left;
    height:100%;
    overflow: hidden;
    margin:0px 0%;
}
.images2 {    
    background-position:center top;
    background-size:auto 100%;
}
.ref2 {
    background-position:center bottom;
}
#cover_reflections .ref1 {
    -webkit-transform: scaleY(-0.9);
} 
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient( linear, center bottom, center top, color-stop(0.1, rgba(255, 255, 255, 0.2)), color-stop(0.95, rgba(255, 255, 255, 0.9)));
}

几乎是一样的；我已将背景图片从 HTML 更改为 CSS。

关键是反射的 scaleY 负值(遵循 bwoebi 想法)。我设置的比 1 小一点，看起来更像是反射，但这取决于您。

一些属性必须改变才能正常工作，例如位置必须在底部。

最后，使用缩放的蒙版 div 覆盖所有 ref1 div，渐变从透明到白色。

我没有包含 JavaScript，并手动修复了尺寸，但您可以按照您已经做过的那样来做。

demo

编辑:增加了透明度和一些模糊度(仅在 webkit 中可用)。添加了一个 div 以检查透明度。

updated demo

变化在这里

#cover_reflections .ref1 {
    -webkit-transform: scaleY(-1);
    opacity: 0.65;
    -webkit-filter: blur(1px);
}

我认为你说的尺寸变化引起的问题与之前的scaleY(-0.9)有关，我认为现在表现正常。关于它的响应性，只是我没有在我的代码中包含您的 Javascript，因为我认为这不是重点，但它应该可以正常工作，没有问题