HTML : 다른 해상도에서 가로 세로 비율을 유지하면서 이미지를 채우는 화면

Question

HTML 페이지를 만드는 데 문제가 있습니다. 특히, 특정 크기 (화면보다 큼)의 배경 이미지를 갖고 싶습니다. 그러나 가로 세로 비율을 유지하고 이미지를 가능한 한 많이 채울 수 있습니다 (타일링없이).

다른 요소를 배경 이미지에 상대적으로 배치하고 싶습니다. 배경은 내용의 일부이며 다른 요소 (예 : 텍스트)가 브라우저 창에서 어떤 해상도로든 이미지에서 그 위치를 유지하기를 원합니다.

아무에게도 해결책을 줄 수 있습니까? HTML, CSS 및 JavaScript를 (분명히) 사용할 수 있습니다. 해결책을 찾지 못하면 이미지를 800x600 또는 1024x768로 만들고 그 해상도로 고정합니다. 나는 이것에 의지하지 않아도기를 바란다.

편집 : backgound-size: contain;은 exepcted로 작동하지 않는다는 것을 언급해야합니다. 적어도 나를 위해서는 아니야.

Answer 1

사용 CSS를 배경 크기의 값은 그냥 나를 위해 작동하지 않습니다

body 
{ 
    background-image:url('smiley.gif'); 
    background-repeat:no-repeat; 
    background-size:contain; 
}