响应式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; 
}