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

我试图用完整的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{
位置：相对位置；
高度：281px；
保证金：0自动；
}
.cf img{
位置：绝对位置；
左：0；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.cf img.top：悬停{
不透明度：0；
}

但是如果我不在.cf上设置高度，那么所有的.cf都会重叠。问题是，我无法将高度设置为响应，并且在调整窗口大小时，它会在其他窗口之间留出一个边距。cf:

有没有办法纠正这一点并使其具有响应性

---

谢谢你

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

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

---

如果你使用的是固定高度，你需要写@media query。使用填充底部和百分比可以工作，我想我会添加一些@media query来让它更好！谢谢你，它似乎起作用了。我没想到用垫底可以解决这个问题！