响应式 CSS 图像淡入淡出答案

【问题标题】：Responsive CSS image cross-fade响应式 CSS 图像淡入淡出
【发布时间】：2014-11-24 22:29:57
【问题描述】：

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

谢谢。

【问题讨论】：

您可以使用百分比和容器 div。

标签： html css web responsive-design

【解决方案1】：

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

DEMO

【讨论】：

谢谢！有效 - 但我将新手的答案标记为选择的答案，这样他就可以收集一些功劳:)

【解决方案2】：

试试这个 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;
}

【讨论】：

【解决方案3】：

试试这个 - 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;
}

【讨论】：