Css 如何在响应网格中获取图像标题？

我有一个响应图像网格，我想在图像上有字幕。通过使用

position:absolute

和

bottom:0

作为

.title

div（caption divs），我得到了图像上的标题，但我无法得到与图像宽度相同的宽度，也无法做出响应。设置

width:100%

我使它们比图像宽

HTML:

<ul class="grid">
  <li>
    <div class="photo">
      <img src="sampleimg.jpg">
      <div class="title">
        <h3>Image Title</h3>
        <a href="#">Link</a>
      </div>
    </div>

试试这个：

.photo, .photo * {
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

.title {
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
    height:auto;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

---

非常感谢你！：）很好用！有没有想过如何用Rails实现这一点，并让它成为动态的？

.photo, .photo * {
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

.title {
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
    height:auto;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}