HTML + CSS로 이미지 위에 개체 배치하기

HTML, CSS + 자바 스크립트에서 스팟 차이 게임을 만들고 있습니다. 그러나 내가 직면 한 문제 중 하나는 다른 해상도에서 마커 서클 & 히트 박스 (기본적으로 마커 서클에서 페이드 인 자바 스크립트 기능에 연결되는 이미지)는 모두 잘못된 위치에 있습니다.HTML + CSS로 이미지 위에 개체 배치하기

CSS에서 백분율 값을 사용하여 절대 위치 지정을 사용하고 있습니다. 마커와 히트 박스가 중첩되는 주 이미지는 페이지의 너비와 높이의 50 %입니다.

감사합니다.

Niall.

편집 : 메인 이미지

출처

2010-11-28 Niall

업데이트에 대한 추가 정보 : 귀하의 편집 :

마커와 hitboxes이 겹쳐받을 것을 주요 이미지는 50 %의 폭과 페이지의 높이입니다.

...는 크게 변경됩니다. :-) 오버레이에 대한 픽셀 값을 사용하는 것에 대한 내 대답은 유효합니다. 이미지의 실제 폭을 디자인 타임에 알 수 없기 때문에 위치를 계산하는 것은 악몽이됩니다. 즉, 실제 너비/높이의 이미지가 런타임에 (예 : JavaScript를 통해) 무엇인지 알아야하고 그 다음에 다른 모든 위치를 절대적으로 배치하기 위해 사용하는 픽셀 값을 조정해야합니다.

피할 수있는 경우 (예 : 몇 가지 표준 크기 만 제공하는 등) 피하는 것이 좋습니다. 가능하지 않은 경우 이미지의 실제 계산 된 너비와 높이를 확인하려면 라이브러리 (예 : jQuery, Prototype, YUI, Closure 또는 any of several others)를 사용하는 것이 좋습니다.

원래 대답 :

나는 백분율 값으로 CSS에서 절대 위치를 사용하고 있습니다.

그러면 문제가 될 수 있습니다. 당신은 이미지의 픽셀이 해결 될 것으로 정확하게 이미지의 상단에 무언가를 배치 할 경우이 같은 비율보다는 픽셀 값을 사용하는 (live example을) 할 것입니다 :

CSS을 :

는

#main { 
    /* Ensure that #main is an offset container */ 
    position: relative; 
} 
#main img { 
    /* Position the image at 0,0 */ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#main div { 
    /* Position the div at 16,16 (middle of the 32x32 image */ 
    position: absolute; 
    left: 16px; 
    top: 16px; 
    background-color: white; 
    border: 1px solid black; 
    padding: 1px; 
}

HTML : 무슨 뜻인지 나는 50 %의 높이 및 너비로 설정 메인 이미지가

<body> 
    <p>Positioning example:</p> 
    <div id='main'> 
    <img src='http://www.gravatar.com/avatar/2f37f49d08a02f40fe0c86529969c47a?s=32&d=identicon&r=PG'> 
    <div>This starts half-way into and half-way down your gravatar</div> 
</body>

출처

2010-11-28 16:10:17

죄송합니다. 지금 내 질문을 수정하겠습니다. – Niall

처음에는 분명히하지 않으셔서 죄송합니다. 저는 2 장의 표준 크기 이미지 (4 : 3 화면과 16 : 9 & 16:10에 대해 하나씩)를 제공하고이를 바탕으로 위치를 계산합니다. 고마워요 :) – Niall

@ 나이 : 아무 걱정, 기꺼이 도왔습니다. –

HTML + CSS로 이미지 위에 개체 배치하기

답변

관련 문제