使 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/image 调整为屏幕大小，请从图像中删除宽度/高度并使用 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;
}