響應式CSS圖像交叉淡化

Question

我看到了這個demo：http://css3.bradshawenterprises.com/cfimg/關於如何使用CSS交叉淡入淡出兩幅圖像，並尋找對此的響應式解決方案，因爲該解決方案需要我定義容器的高度和寬度。

這是演示的代碼對於那些不想點擊誰：

HTML：

<div id="cf"> 
    <img class="bottom" src="/images/Windows%20Logo.jpg" /> 
    <img class="top" src="/images/Turtle.jpg" /> 
</div>` 

CSS：

#cf { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto; 
} 

#cf img { 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#cf img.top:hover { 
    opacity:0; 
} 

的jsfiddle：http://jsfiddle.net/nqaq77ec/

謝謝您。

Answer 1

試試這個 - http://fiddle.jshell.net/gruqmh6j/

#cf { 
position:relative; 
height:400px; 
width:400px; 
max-width:100%; 
margin:0 auto; 
} 

#cf img { 
position:absolute; 
max-width:100%; 
left:0; 
-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 
} 

Answer 2

你只需要設置一個百分比寬度在容器上，並在圖像中設置width:100%; height: auto;：

DEMO

Answer 3

試試這個CSS：

#cf { 
    position:relative; 
    width:100%; 
    height:100%; 
    max-height:400px; 
    max-width:400px; 
    margin:0 auto; 
} 

#cf img { 
    width:100%; 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#cf img.top:hover { 
    opacity:0; 
}