캡션 오버레이로 액체 중심의 이미지를 만드는 방법은 무엇입니까?

Question

나는 캡션 오버레이를 중심으로 이미지를 표시하기 위해 CSS로 노력하고 있으며 브라우저 창이 너무 작을 때 액체 기능을 사용하려고한다.

나의 현재 최선의 시도는 내가 그것을 원하는대로가 중심 다르게 동작하는 경우,

.container { 
    position : relative; 
    max-width : 364px; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    max-width:364px; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

그러나 다음과 같은 CSS로

<div align="center"> 
    <div class="container"> 
     <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
     <h3 class="caption">Image Caption</h3> 
    </div> 
</div> 

(샘플 이미지로 구글의 로고를 사용하여) 다음과 같은 HTML처럼 보인다 큰 브라우저 창을 위해, 그것은 작은 브라우저 창을 위해 축소되지 않습니다 ... 또한 IE 지원, WebKit 특정 (아이폰/안드로이드)이 충분하고, 가능한 경우 JavaScript를 피하고 싶습니다 필요가 없습니다 .

JSFiddle 준비하는 버전으로 연주 http://jsfiddle.net/kWH3C/1/

Answer 1

그냥 대신 이미지의 컨테이너에 최대 폭을 설정하고 할 이미지를 알려 width:100%

http://jsfiddle.net/Madmartigan/kWH3C/5/

<div class="container"> 
    <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
    <h3 class="caption">Image Caption</h3> 
</div> 

.container { 
    position : relative; 
    max-width : 364px; 
    margin:0 auto; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    width:100%; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

바깥 쪽 div가 필요없고 align="center"은 HTML5에서 사용되지 않으며 CSS를 사용하여 정렬 및 위치 지정을 수행합니다.