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结构可以帮助您这样做，不要忘记在上面的标题中添加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>

Fiddle Demo

如何在响应式图像下创建标题

2 个答案: