배경 이미지가 완전히 늘어나지 않고 있습니다.

저는 방금 전에 웹 사이트를 시작했고 이상한 CSS 실수가 없다고 생각했지만 분명히 그렇지 않았습니다. 내가 여기서하려고하는 것은 페이지를 높이와 너비에 맞추기 위해 이미지를 잡아 당기는 것입니다.배경 이미지가 완전히 늘어나지 않고 있습니다.

는 문제 : 나는 다음과 같은 마크 업 한 :

<img src="images/night_sky7.jpg" class="stretch" />

다음과 같은 CSS는 적용 :

img.stretch { 
left: 0px; 
position: absolute; 
top: 0px; 
width: 100%; 
z-index: 0; 
}

것은이 화면 1440x900 해상도로 내 17.1 '노트북에 잘 작동 ,하지만 다른 화면 해상도에서 제대로 작동하지 않는 것으로 나타났습니다. 무슨 일이 일어나는가는 배경이 아래쪽으로 늘어나지 않고, 페이지의 아래쪽 또는 중간까지 늘어나는 것입니다.

이제 CSS를 많이 변경하려고 시도했지만 완전히 확장 할 수는 없습니다.

도움을 주시면 감사하겠습니다.

원하는 경우 테스트 할 수있는 URL은 다음과 같습니다. http://bit.ly/eOEzXJ.

필요한 경우, 나는이 일의 수행 할 수 있습니다 모든 사이즈에

에 포토샵에서

2010-12-07 Evert

에 HTML의 img 태그의 높이와 너비를 설정할 수 있습니다. CSS로 할 수없는 요소의 배경을 늘리려고하는 것처럼 보였습니다. – meagar

이미지를 늘려서는 안되며 반복하고 싶다면 배경 반복을 사용하십시오. – kobe

@ 고후, 귀하의 의견에 감사드립니다! 그러나 링크를 보면 이미지를 반복하지 않고 페이지에 맞게 이미지를 늘릴 수 있습니다. 이미지는 충분히 커야합니다. – Evert

이 일을 시도 볼 수 이상하지대로 작동하지 않습니다

body { 
    height: 100%; 
} 

img.stretch { 
    // your stuff 
    height: 100% 
}

나는 당신이 또한 래퍼 CSS 클래스가났습니다. 여기 궤도에

#wrapper { 
    height: 100%; 
}

2010-12-07 16:39:08

설명대로 원래 가로 세로 비율을 유지하기 위해 이미지의 높이가 조정됩니다. 이것은 종종 긴 문서의 경우 키가 크지 않습니다. 이미지가 아래쪽으로 평평한 색으로 변하는 것을 고려할 수 있습니다. – meagar

답변을 주셔서 감사합니다 :-) 이것은 문제를 해결하는 것 같지 않습니다, 불행히도 .. – Evert

척을하지만, 당신은뿐만 아니라

html { 
    height: 100%; 
}

을 추가해야 할 수 있습니다 : 당신은이를 추가해야 할 것입니다.

2010-12-07 16:41:12

당신은 단지 100 % 당신이 바꾸어 말하다 할 수 있습니다

<img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>

2010-12-07 21:03:33 Kobby

답변