html - 响应式 CSS 图像交叉淡入淡出

Question

我看到了这个演示: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

你只需要在容器上设置一个百分比宽度并设置width:100%; height: auto; 在图像上:

DEMO