이미지가 페이지로드시 창에 덮 임

-1

다른 이미지가 아래로 스크롤 될 때 이미지가 표시되도록 (전체 배경 이미지가 아닌) 이미지를 표시하려면 어떻게해야합니까? 이미지가 페이지로드시 창에 덮 임

내가 무슨 말의 예

은 여기에 있습니다 : 그 예에서

http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012

는 화면의 크기를 조정하고 아래로 스크롤 할 때 이미지가 어떻게 반응하는지 살펴 봅니다.

귀하의 답변을 기다리겠습니다.

감사합니다.

추신 : 데모를 보낼 수도 있다면 정말 도움이 될 것입니다. 고맙습니다!

출처

2013-07-19 Savion Smith

당신이 시도 가지고 당신이 그렇게 당신에게 이미지를 원하는 곳

function resizeBackground() { var targetWidth; var targetHeight; if (typeof window.innerWidth != 'undefined') { targetWidth = window.innerWidth, targetHeight = window.innerHeight } else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { targetWidth = document.documentElement.clientWidth, targetHeight = document.documentElement.clientHeight } else { targetWidth = document.getElementsByTagName('body')[0].clientWidth, targetHeight = document.getElementsByTagName('body')[0].clientHeight } var background = new Image(); background.src = document.getElementById("backgroundImage").src; var target = document.getElementById("backgroundImage"); var sourceWidth = background.width; var sourceHeight = background.height; if (targetWidth/sourceWidth > targetHeight/sourceHeight) { target.width = targetWidth; target.height = sourceHeight * (targetWidth/sourceWidth); } else { target.width = sourceWidth * (targetHeight/sourceHeight); target.height = targetHeight; } } window.onload = resizeBackground; window.onresize = resizeBackground;

그런 다음 사업부를 삽입 아무것도? 이것을 성취하기 위해 당신은 무엇을 제안합니까? – Seth

음, 이미지의 너비를 100 %로 설정해 보았습니다.하지만 효과 높이를 현명하게 유지했습니다 ... 이미지가 특정 크기 여야하는지 아니면 jquery 플러그인과 관련이 있는지 확실하지 않습니다. –

페이지를 방문하는 동안 Google 크롬에서 F12 키를 눌러 필요한 모든 것을 볼 수 있습니다. –

다음 JS는 데 도움이 될 것입니다

<div id= 'backgroundimage'></div>

그리고 마지막으로 CSS :

#backgroundimage {background-image:url(image.jpg); width:100%;}

출처

2013-07-19 01:13:16

안녕하세요 Liane, 내가 코드를 작성하여 온라인에서 보았을 때 이미지가 나타나지 않았습니다. –

Firefox v22를 사용하여 나에게 적합하지 않았습니다. –

@SavionSmith 도움이 될 수있는 다음 링크를 참조하십시오 ** 순수 CSS ** : http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid - 비율 - 비율 –

이미지가 페이지로드시 창에 덮 임

답변

관련 문제