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