responsive-design - レスポンシブ画像の下にキャプションを作成するにはどうすればよいですか

Question

これが私たちのテストです。 http://www.photoeye.com/test1/test4.cfm

レスポンシブ画像のすぐ下にキャプションを作成するにはどうすればよいですか? ありがとう。

Answer 1

<figcaption>ではなく、縦に2分割してはどうでしょうか。最初の内部<div>には画像が含まれ、2 番目の内部<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>

フィドルのデモ