이미지 크기의 콘텐츠 위치 종속성

내 웹 사이트의 일부에 문제가 있습니다. 내 탐색 막대에서 배경 이미지가 디스플레이 크기로 조정됩니다. 즉, 디스플레이 크기가 커지면 이미지가 커지고 디스플레이 크기가 작아지면 이미지가 작아집니다. 이제 사이트의 콘텐츠가 위치가 이미지의 크기에 종속적 인 것입니다. 즉, 디스플레이 크기가 디스플레이의 절반 (50 %)에서 시작되면 예를 들어 다른 디스플레이 크기에서 디스플레이의 60 %에서 시작합니다. 따라서 위치는 이미지의 크기에 따라 달라집니다. 이미지 크기의 콘텐츠 위치 종속성

<style type="text/css"> 
 

 

 
    html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    } 
 

 
    #hintergrund { 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 1; } 
 

 
    #content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 2; 
 
    overflow: auto; 
 
    } 
 

 
    </style> 
 

 
    <body> 
 
    <img id="hintergrund" src="http://www.frank-liedermacher.de/bilder/navi.jpg" border="0" alt="Hintergrundbild"> 
 
     </body>

어떻게 내가 갖고 싶은 것을 깨닫게 수 : 다음은 디스플레이 크기의 이미지의 크기에 의존하게 내 코드입니다. html과 css에서만이 작업을 수행 할 수 있습니까?

는 크레인

출처

2014-12-30 crane

배경 이미지가 보이지 않습니다. –

모든 배경 속성 여기에 감사 : http://www.w3schools.com/css/css_background.asp

#hintergrund { 
    background-image: url('http://www.frank-liedermacher.de/bilder/navi.jpg'); 
}

출처

2014-12-30 12:34:13 Mardzis

아니, 나는 그런 대답을 원하지 않았다. 나는 배경이나 배경처럼 보이는 이미지에 문제가 없다. "배경"에 대해 내 솔루션을 정확하게 사용하고 싶습니다. 내가 알고 싶은 것은 이미지의 크기에 따라 콘텐츠의 일부를 배치 할 수있는 방법입니다. 게시 된 방법으로 이미지 크기가 디스플레이 크기로 변경됩니다. 따라서 더 높은 디스플레이 크기에서 이미지가 커집니다. 즉, 볼 수있는 언덕이 더 낮은 디스플레이 크기보다 화면의 더 높은 디스플레이 크기에 있음을 의미합니다. 그리고 내가하고 싶은 일은 내 콘텐츠의 일부가 이미지의 언덕 위치에있는 모든 디스플레이 크기에서 시작된다는 것입니다.

출처

2014-12-31 12:27:08 crane

이미지 크기의 콘텐츠 위치 종속성

답변

관련 문제