Question

我想将标题放在我的照片下面（但仍然在它上面）并且它与图片的宽度相同（图片的宽度可以改变）。

这是我所做的，但经过几个小时的研究后，我一直无法弄清楚如何将标题的宽度扩展到图片的相同宽度。有人可以给我一个暗示吗？谢谢

figure{
    position: relative;
}
figure img{
    z-index: 1;
}
figure .caption{
  display: block;
  width: 100%;
  position: absolute;
  bottom: 2px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 8px 8px 8px 8px;

}

 <div class="img">
     <figure>
      <a href="#"><img  src="http://1.bp.blogspot.com/_xNTvSztbjn0/S9rYIIoIdkI/AAAAAAAAFHk/RCYU5iILKTc/s1600/0l+P1010254.jpg"/></a>
      <figcaption>
        <span class="caption">A short description</span>
        </figcaption>
    </figure>
  </div>

这是小提琴http://jsfiddle.net/7hKKV/

Answer 1

略微调整您的代码：

figure {
  position: relative;
  width: 100%;
}
figure img{
  z-index: 1;
  width: 100%;
}
figcaption {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 2px;
  color: #fff;
  background: rgba(0,0,0,0.7);
}
figcaption .caption {
  display: inline-block;
  padding: 8px;
}

在父级上设置100％宽度，将caption的样式移至父级figcaption，将标题的padding移至span，制作您的图像100％宽度以填充容器

http://jsfiddle.net/LF33A/1/

Answer 2

你真的很亲密。您需要添加一些width: 100%样式才能实现此目的

figure{
    position: relative;
    width: 100%; /*Allows .caption to extend across image without going over*/
}
figure img{
    z-index: 1;
    width: 100%; /*Image will be size to 100% if div.img*/
    height: auto; /*Prevents Skewing of image*/
}

更新小提琴 http://jsfiddle.net/7hKKV/12/

如何在图片下方放置标题并使用相同的宽度？

2 个答案: