將Div適合頁面？

Question

我想讓懸停圖像和鏈接添加到div但div不適合頁面。

例如： http://test.peterstavrou.com/

看到圖像如何被切斷？

任何人有任何想法？

以下是我的代碼。

CSS

#cf { 
    position:relative; 
    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; 

} 

HTML：

<a href="http://www.peterstavrou.com/product/ebay-listing-template/"><div id="cf"><img class="bottom" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template-Price.jpg" alt="eBay Template Listing" width="292" height="311" /><img class="top" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template.jpg" alt="eBay Template Listing" width="292" height="311" /></div></a> 

&nbsp; 
<strong>Summary:</strong> TEST TEST TEST 
<a title="eBay Template Listing" href="http://www.peterstavrou.com/product/ebay-listening-template/">Click here for more information.</a> 

的jsfiddle http://jsfiddle.net/hz80govj/

Answer 1

在div僅包含一個圖像，所以它的寬度/高度，從該圖像寬度導出/高度，目前設置爲width="292" height="311"。

如果您希望DIV /圖像調整到屏幕大小，請從圖像寬度/高度，並使用設置的圖像尺寸CSS：

img{ 
    max-width: 100%; 
} 

Answer 2

你的問題並不清楚，但是當我瞭解你需要適合div的大小的圖片。如果我正確使用下面的CSS。

#cf { 
    position:relative; 
    float:left; 
    margin:0 auto; 
} 

.top { 
    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; 
} 

.bottom { 
    position:inherit; 
}