将 div 覆盖在图像上并适应宽度答案

【问题标题】：Overlay div over image and fit the width将 div 覆盖在图像上并适应宽度
【发布时间】：2012-03-21 16:12:19
【问题描述】：

当图片悬停时，如何让广告占图片宽度的 100%，

问题来了：

http://whotheyrewearing.tumblr.com/

图像可以是任何宽度，但我不希望它溢出图像，我使用绝对定位并将左右设置为 0 以使其拉伸，但它会拉伸到包含 div 的宽度而不是 imgWrap跨度。

【问题讨论】：

在您的问题上发布相关代码。
您想要 JavaScript 答案还是仅 CSS？您可以更改标记以匹配建议吗？图片是作为内联元素、块还是其他（浮动、绝对位置）存在？

标签： css image css-position tumblr

【解决方案1】：

首先，如果 img 元素是浮动的，那么它的父元素不会自动获取大小。另外，正如我所见，imgWrap 是一个 div 而不是一个跨度，使其使用尽可能多的宽度，设置为 display: 块。

您应该将您的 img 元素包裹在另一个带有显示内联或内联块的元素中。这将确保包装元素采用其子元素的大小。给它一个相对位置，然后你可以用绝对位置放置标题并将其设置为使用 100% 宽度。

希望对您有所帮助。祝你好运！

附言

检查了你的代码，这是我认为你应该做的。将以下内容添加到您的 div.imgWrap：

display: inline-block;
position: relative;

我认为在你的情况下就足够了。

【讨论】：

【解决方案2】：

你可以使用类似的东西：

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

与其各自的类，

【讨论】：