【问题标题】: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;
    }
    

    与其各自的类,

    【讨论】:

      猜你喜欢
      • 2013-01-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-23
      • 2013-05-06
      • 1970-01-01
      相关资源
      最近更新 更多