javascript - 悬停图像功能 : how can I set its dimension by percentage and how to simplify this code?

Question

我正在使用实现以下目标的图像效果代码:
1) 结合background-blend-mode: multiply 和filter: saturation 0%
2) 将鼠标悬停在图片上时，图片会恢复为原始调色板。

我希望你们能帮助我实现以下目标:
1) 当高度设置为自动时，如何确定图像的宽度百分比？示例:宽度:50%；高度:自动
2) 我如何简化此代码 使其不那么笨拙？我觉得这段代码可以更有效地构建......3) 如何让图片的宽度对应于.page wrapper？

这是一个jsfiddle用于视觉/功能引用。

这是我需要帮助实现的目标的可视化
(左:当前，右:目标)

代码如下:

HTML:

<div class="page">

<div class="image-wrap-01">
    <div class="image01">
        <svg>
            <defs>
                <filter id="colorize_brown" color-interpolation-filters="sRGB">
                    <feFlood flood-color="#8E4204" result="A" />
                    <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
                    <feBlend mode="multiply" in2="B" in="A" />
                </filter>
            </defs>
            <image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i59.tinypic.com/1zvwwv9.jpg" />
        </svg>
    </div>
    <p class="caption01">Image 001</p>
</div> <!-- END | image-wrap-01 -->

<div class="image-wrap-02">
    <div class="image02">
        <svg>
            <defs>
                <filter id="colorize_brown" color-interpolation-filters="sRGB">
                    <feFlood flood-color="#8E4204" result="A" />
                    <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
                    <feBlend mode="multiply" in2="B" in="A" />
                </filter>
            </defs>
            <image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i60.tinypic.com/nwzvpx.jpg" />
        </svg>
    </div>
    <p class="caption02">Image 002</p>
</div> <!-- END | image-wrap-02 -->

</div> <!-- END | .page -->

CSS:

/* PAGE WRAP */
.page {
    width: 50%;
    height: 50%;
    background-color: #ffecae;
}

/* IMAGE 01 */
.image-wrap-01 {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}
.image01, .image01 svg {
    width: 600px;
    height: 400px;
}
.image01 {
    background: url("http://i59.tinypic.com/1zvwwv9.jpg");
    background-size: 600px 400px;
    position: relative;
}

/* IMAGE 02 */
.image-wrap-02 {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}
.image02, .image02 svg {
    width: 400px;
    height: 600px;
}
.image02 {
    background: url("http://i60.tinypic.com/nwzvpx.jpg");
    background-size: 400px 600px;
    position: relative;
}

/* UNIVERSAL COMMAND */
.image01 svg, .image02 svg {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

/* HOVEROVER */
.brown {
    opacity: 1;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.brown:hover {
    opacity: 0;
}

/* IMAGE CAPTIONS */
.caption01 {
    text-align: left;
    font: 13px/17px helvetica;
    color: black;
    width: 600px;
}

.caption02 {
    text-align: right;
    font: 13px/17px helvetica;
    color: black;
    width: 400px;
}

Answer 1

我相信这可以回答您的问题:

图像现在是列的整个宽度。您唯一需要手动编码的是图像的纵横比为 padding-top:150%;，这与将 youtube/vimeo 视频嵌入网站的响应式解决方案相同。

http://jsfiddle.net/ryanpither/6x0apqod/

如果我对您的问题的理解有误，请告诉我。