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

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;
}