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