Question

我正在尝试使用完整的css对我的图片进行悬停效果，但我的位置有问题：相对于我的容器

<div class="cf">
  <img class="bottom" src="img/productions/Page-2.jpg" />
  <img class="top" src="img/productions/Page-1.jpg" />
</div>

.cf {
  position:relative;
  height:281px;
  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;
}

但是如果我没有在.cf上设置高度，那么所有.cf都会重叠。问题是我不能将高度设置为响应，并且在调整窗口大小时，它允许其他人之间的边距.cf： http://les.webmaster.free.fr/alicialegoff/productions.html

有没有办法纠正这个并使其响应？

谢谢

Answer 1

如果要使响应更快，则需要避免使用绝对px值。解决此问题的一种方法是使用零高度和容器的基于百分比的填充来保持纵横比，如下所示：

.cf {
    position:relative;
    height: 0;
    padding-bottom: 40%;
    margin: 0 auto;
}

CSS - 位置相对于响应高度

1 个答案: