如何在图片下方放置相同宽度的标题？答案

【问题标题】：How to position a caption below a picture and with the same width?如何在图片下方放置相同宽度的标题？
【发布时间】：2014-02-07 01:55:39
【问题描述】：

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

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

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/

【问题讨论】：

标签： css position css-position

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

感谢您的回答，但标题现在超出了图片的右边缘！