텍스트가 제대로 정렬되지 않음 - 글꼴 크기 문제가 있습니까?

Question

기본 이미지의 크기를 늘리거나 줄이더라도 정렬 된 상태로 이미지 위에 텍스트를 정렬하려고합니다. Photoshop 측정에서 가져온 px 값을 사용하고 있습니다.

http://jsfiddle.net/dXNgx/을 참조하십시오. "For"라는 단어가 이미지 위에 중첩되어 있습니다. 높이를 20 픽셀로 측정하지만 이미지에 배치하면 font-size: 20px;의 결과는 기본 이미지보다 작은 "For"가됩니다. 뭐라 구요?

Answer 1

div.layer를 # page1 외부에 -moz-transform과 같이 배치해야합니다. scale (.5); 그것에 적용됩니다.

<a href="#" id="zoom_in">Zoom In +</a> | <a href="#" id="zoom_out">Zoom Out -</a> 
<div style="position:relative;"> 
    <div style="-moz-transform:scale(.5); -moz-transform-origin:left top;position:absolute;" class="page" id="page1"> 
     <div class="layer" style="z-index:1;"> 
      <img src="http://cobalt.xtracta.com/images/image.jpg" style="width:2480px; height:3508px"> 
     </div> 
    </div> 
    <div class="layer" style="z-index:2;"> 
     <div style="font-size: 20px; position:absolute; color:#F00; top: 1550px; left: 306px;">For</div> 
    </div> 
</div> 

는

http://jsfiddle.net/dXNgx/2/