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

Question

我有一个响应式图像网格，我想在图像上添加标题。通过将position:absolute 和bottom:0 用于.title div（标题div），我得到了图像上的标题，但我无法让它们的宽度与图像的宽度相同 - 并且反应灵敏。设置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>

CSS：

.photo {
    margin: 0;
    position: relative;
}

.photo img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
}

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

Answer 1

试试这个：

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