懸停圖像功能：如何設置其百分比尺寸以及如何簡化此代碼？

Question

我與實現瞭如下一個圖像效果代碼工作：
1）結合了background-blend-mode: multiply和filter: saturation 0%
2）當懸停在圖像時，圖像返回到其原來的顏色調色板。

我希望大家能幫助我實現以下目標：
1）如何確定按百分比的圖像的寬度，而高度設置爲auto？例如：寬度：50％;身高：自動
2）我該如何簡化此代碼所以它不那麼矮胖？我覺得這樣的代碼可以更有效地構造... 3）我怎樣才能使圖像的寬度對應於.page包裝？

這是用於視覺/功能參考的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/

讓我知道如果我理解你的問題是錯誤的。