覆蓋DIV了圖像，適合寬度

我如何獲取廣告是圖像的寬度的100％時，圖像懸停，覆蓋DIV了圖像，適合寬度

這裏是問題：

http://whotheyrewearing.tumblr.com/

圖像可以是任何寬度，但我不希望它溢出圖像，我用左右絕對定位設置爲0使其伸展，但它延伸到包含div的寬度而不是imgWrap跨度。

來源

2012-03-21 cjroebuck

對您的問題發表相關的代碼。 – 2012-03-21 16:15:47

你只想要JavaScript的回答或CSS嗎？你可以改變你的標記以符合建議嗎？圖像是作爲內嵌元素，塊還是其他（float，絕對位置）呈現？ – Phrogz 2012-03-21 16:17:30

首先，如果img元素是浮動的，那麼它的父元素不會自動獲得大小。另外，正如我所看到的，imgWrap是一個div而不是一個span，它使用盡可能多的寬度，被設置爲display：block。

你應該把你的img元素包裝在另一個顯示內聯或內聯塊的元素中。這將確保包裝元素取得其子女的大小。給它一個相對位置，然後你可以放置一個絕對位置的標題，並將其設置爲使用100％的寬度。

希望它有幫助。祝你好運！

P.S.

檢查你的代碼，這是我認爲你應該做的。以下內容添加到您的div.imgWrap：

display: inline-block; 
position: relative;

我認爲在你的情況就足夠了。

來源

2012-03-21 16:20:18 iMoses

完美，謝謝 - 一直在煩我！ – cjroebuck 2012-03-21 16:26:52

您可以使用類似：

<a href="#"> 
<img src="image_path"> 
<span>Your text add</span> 
</a>

和css：

a { 
    display: block; 
    overflow: hidden; 
    position: relative; 
} 

span { 
    background: #000; 
    bottom: 0; 
    color: #FFFFFF; 
    display: none; 
    max-height: 100px; /* same as the biggest image*/ 
    opacity: 0.65; 
    overflow: hidden; 
    padding: 0 2px; 
    position: absolute; 
    width: 100px; /* same as the image*/ 
} 

a:hover span { 
    display: block; 
}

與其相應的類，

來源

2012-03-21 16:26:22 eveevans

覆蓋DIV了圖像，適合寬度

回答

相關問題