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

，如果你想使这个响应，你需要避免绝对像素值。解决方法之一是使用零高度和基于百分比的填充的容器保持纵横比，这样的：

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