多个-webkit-box-左右反射一个图像

Question

所以，

我正在考虑扩大图像，使它们在给定一定高度的情况下填充宽度​​。

我决定要做一些左右反射图像的事情。

但是，我只能将它应用于图像的一面。

HTML：

<div class="image">
    <img src="http://i.imgur.com/LukIbK7.jpg" />
</div>

的CSS：

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

jsfiddle

我也尝试过使用：之前按照类似帖子的指示（与多个边框有关）here

如果还有其他解决方案，请通知我（无需实际编辑图像）。

基本上，我希望结果css为：

.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
    -webkit-box-reflect: right 0px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

实现：

但显然它会覆盖它。

Answer 1

到目前为止，唯一与我想要创建的东西类似的东西是使用一些复制img的笨拙的jquery。

$("img").clone().appendTo(".image")
.css("-webkit-box-reflect", "left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))")
.css("margin-top", "-100%");

虽然如此混乱：http://jsfiddle.net/hum7uo2y/1/

编辑：

找到了一种方法，没有考虑反映div。

现在是HTML：

<div class="image">
    <div class="reflect">
        <img src="http://i.imgur.com/LukIbK7.jpg" />
    </div>
</div>

css现在是：

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.reflect {
    width:50%;
    margin:auto;
    -webkit-box-reflect: right -2px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))
}
.image img {
    width:100%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

新小提琴：http://jsfiddle.net/hum7uo2y/3/