액체 이미지 웹 사이트 레이아웃에서 전체 너비로 이미지 크기

Question

액체 레이아웃으로 웹 사이트를 운영합니다. 전체 너비 헤더, 고정 너비 왼쪽 부분, 선택적인 고정 너비 오른쪽 열 및 가변 너비 내용 영역이 중간에 있습니다. 콘텐츠 div의 전체 너비로 이미지의 크기를 조정하는 방법을 찾고 있습니다.

콘텐츠의 일반적인 레이아웃 구조는 다음

body{position:absolute;width:100%},div#content{position:absolute;left:300px;},div#article 

I가 화상없이 스케일링 폭 div#article로 확장 div#article 내의 화상을 원한다. img{width:100%;}을 사용하면 트릭을 수행하지 않습니다. div#arcticle은 이미지의 자연스러운 너비로 확장되고 스크롤 막대를 뷰포트에 추가합니다.

현재 페이지가 렌더링 된 후 jQuery를 사용하여 이미지를 컨테이너 너비로 조정하는 문제가 해결되었습니다. 그러나 브라우저 창 크기를 조정하면 추가 코드가 필요합니다.

이 문제에 대한 CSS 솔루션이 있습니까?

그렇지 않은 경우 누구든지 JavaScript의 크기 조정 이벤트 문제를 해결할 좋은 아이디어가 있습니까?

Answer 1

JavaScript가 필요하다고 생각하지는 않지만 background-size를 사용하는 가능한 CSS 솔루션은 다음과 같습니다. 귀하의 div를 채울 커버.

body { 
display: table; 
width: 100%; 
height: auto; 
padding: 100px 0; 
text-align: center; 
color: #fff; 
background: url(path to image) no-repeat bottom center scroll; 
background-color: #000; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 

}