CSS

Question

我想在我的图像上制作悬停效果，完整 css 但我的容器 position:relative 有问题

<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 都会重叠。问题是我无法将高度设置为响应式，并且在调整 window 大小时，它会在其他 .cf 之间留出空白： http://les.webmaster.free.fr/alicialegoff/productions.html

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

谢谢

Answer 1

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

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

CSS - 相对于响应高度的位置

CSS - position relative with responsive height

html

responsive