Question

当图像悬停时，如何让广告成为图片宽度的100％

问题在于：

http://whotheyrewearing.tumblr.com/

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

Answer 1

首先，如果img元素是浮动的，那么它的父元素将不会自动获得大小。另外，正如我所看到的，imgWrap是一个div而不是一个span，使得它尽可能使用宽度，设置为display：block。

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

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

P.S。

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

display: inline-block;
position: relative;

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

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

及其各自的班级，

在图像上叠加div并适合宽度

2 个答案: