-1

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

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

4

2 に答える 2

0

<figcaption>ではなく、縦に2分割してはどうでしょうか。最初の内部<div>には画像が含まれ、2 番目の内部<div>にはキャプションが含まれます。このようなもの：

<div>
    <div>
        <img src="my_image.jpg">
    </div>
    <div>My caption</div>
</div>
于 2013-09-03T06:11:41.113 に答える
0

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>

フィドルのデモ

于 2013-09-03T06:41:35.173 に答える