반응 형 이미지 아래에 캡션은 어떻게 만들 수 있습니까?

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

는

CSS ... HTML5의 구조는 위의 머리 태그에 html5shiv를 추가하는 것을 잊지 마세요,이 일에서 당신을 도움이 될 수 있음 : -

.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