Текст не выравнивается правильно - проблема размера шрифта?

Question

Я пытаюсь выровнять текст поверх изображения таким образом, чтобы оно оставалось выровненным, даже если базовое изображение увеличивается / уменьшается в размере. Я использую значения px, которые были взяты из измерений Photoshop.

Пожалуйста, посмотрите на http://jsfiddle.net/dXNgx/. Слово "For" накладывается на изображение. Он имеет высоту 20 пикселей, но при размещении на изображении font-size: 20px; приводит к значению «For», которое меньше базового изображения. Что дает?

Answer 1

Вам нужно поместить слой div. снаружи # 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/