IMG는

2014-01-22 5 views
0

:IMG는

<div id='container'> 

    ...some stuff.... 

    <div id='img_box'> 
    <img src=''> 
    </div> 

</div> 

가있는 "컨테이너"는 고정 폭 (즉 1200 픽셀), 나는 IMG의 폭을 설정하는 경우 100 %까지, 그녀는 단지 1200px에 걸쳐 있으므로 컨테이너에 비용이 들게됩니다.

이미지가 브라우저 창의 전체 너비 (가로 가장자리 여백을 뺀 부분)에 걸쳐 있고, 수평 중심으로 배치되어있어 IMG가 창을 확대하는 동안 유체 모양으로 컨테이너를 과도하게 지나치도록 할 수 있기를 바랍니다.

이렇게 할 수 있습니까?

답변

0

아니요 가능한 유일한 방법은 img 태그 또는 #img_box을 절대적으로 배치하고 상위 컨테이너가 position:relative인지 확인하는 것입니다.
img은 명시적인 너비가 있고 이미지가 100 % 너비로 설정된 경우 항상 부모 컨테이너의 너비입니다.

1

당신은 CSS3이

FIDDLE

img 
{ 
    display:inline-block; 
    width: 100vw; /* 100% of viewport width */ 
    position: absolute; 
    left:0; 
} 
+0

좋은 아이디어를 새로운 CSS 뷰포트 단위를 사용할 수 있습니다 –

관련 문제