responsive-design - 如何在响应式图像下方创建标题

Question

这是我们的测试。 http://www.photoeye.com/test1/test4.cfm

如何在响应式图像下方创建标题？谢谢。

Answer 1

不使用<figcaption>，而是使用两个垂直分区怎么样？第一个内部<div>包含图像，第二个内部<div>包含标题。像这样的东西：

<div>
    <div>
        <img src="my_image.jpg">
    </div>
    <div>My caption</div>
</div>

Answer 2

可能是一个 HTML5 结构可以帮助你做到这一点，不要忘记在上面的 head 标签中添加html5shiv ......

CSS：-

.resp-adapt { position:relative; }
.resp-adapt img { width:100%; margin-bottom:-2px; }
.resp-adapt figcaption { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0,0,0,0.5); }
.resp-adapt a { color:#fff; display:block; padding:10px; }

HTML:-

<figure class="resp-adapt">
  <img src="xyz.jpg" alt="Image">
  <figcaption> <a href="#">Caption Link</a> 1</figcaption>
</figure>

小提琴演示