Масштабирование встроенного изображения от абсолютного центра его родителя?

Question

Я знаю, что это еще один центральный вопрос, но я думаю, что он отличается от любого другого вопроса в StackOverflow. Прежде чем кто-то скажет, что да, я искал решение, но ничего не нашел.

Чтобы лучше изложить свою точку зрения, я смоделировал изображение, чтобы дать вам представление о том, что я хотел бы, чтобы мое изображение делало: http://cl.ly/1q143w1P2p19322s2L0s

Проблема

У меня изменчивый макет ширины браузера. Для этого вопроса и для лучшего объяснения мое изображение установлено на ширину 400% (высота рассчитывается автоматически для поддержания соотношения сторон). Поэтому изображение будет заполнять весь экран (и даже больше). Каждый метод, который я пробовал, делает масштаб изображения сверху слева от родителя / оболочки контейнера, так что верхняя левая сторона изображения всегда видна, но я не хочу, чтобы это произошло.

Вместо этого я хочу, чтобы точный центр моего изображения всегда отображался при изменении размера браузера. Независимо от высоты или ширины окна браузера.

Я надеюсь, что все имеет смысл, это довольно сложно объяснить. До сих пор я пробовал чистые решения CSS, но пока не повезло. Может ли jQuery помочь мне?

-

Я пробовал эту технику (http://css -tricks.com / centering-in-the-unknown /), но изображение масштабируется от верхнего левого края изображения, а это не то, что мне нужно.

Answer 1

Если все, чего вы пытаетесь добиться, это держать центр изображения в постоянном положении, то вам просто нужно отрегулировать свойства top и left изображения, чтобы центр изображения находился в середина окружающего кадра.

Вычисление - это просто нахождение средней точки вашего кадра, которая находится на полпути вдоль него, и вычитание половины ширины изображения, чтобы найти левую позицию, то же самое с высотой для верхней позиции.

Я сделал вам демонстрационную программу, чтобы показать вам, изменить ширину в поле, максимум 500, и вы увидите, что изображение остается в центре.

Демо: http://jsfiddle.net/Orbling/ZZrjP/

Центрированное изображение - 200x200

Центрированное изображение - 400x400

Я использую #outer-frame для представления вашего окна или внешнего div вашего сайта, #image-frame - это любой размер, при котором вы хотите, чтобы изображение отображалось. Если вы хотите, чтобы ваше изображение занимало полное окно, откажитесь от концепции внешней рамки и используйте окно в качестве рамки изображения.

HTML:

<div id="outer-frame">
    <div id="image-frame">
        <img src="http://fc01.deviantart.net/fs50/f/2009/317/f/4/Colour_Spiral_by_Deatant2.jpg" alt="Spiral by Deatant2" width="1280" height="736" />
    </div>
</div>
<div id="controls">
    Width: <input type="text" id="iwidth" name="iwidth" value="200" />
    Height: <input type="text" id="iheight" name="iheight" value="200" />
</div>

CSS:

#outer-frame { width: 500px; height: 500px; margin: 10px; border: 1px dashed black; }
#image-frame { width: 200px; height: 200px; overflow: hidden; position: relative; }
#image-frame img { position: relative; }
#controls { margin: 10px 10px 0 10px; }
#controls input { width: 80px; }

Обратите внимание на директивы position: relative;, которые гарантируют, что позиции относительно контейнера, если бы они были относительно страницы, вычисления должны были бы быть смещены.

JQuery:

$('#image-frame').bind('reposition-image', function() {
    var imageFrame = $(this);
    var outerFrame = $('#outer-frame');
    var image = imageFrame.find('img');

    var frameWidth = imageFrame.width();
    var frameHeight = imageFrame.height();

    // center image frame
    imageFrame.css({ left: (outerFrame.width() / 2) - (imageFrame.width() / 2),
                     top:  (outerFrame.height() / 2) - (imageFrame.height() /2)});

    // position image in frame
    image.css({ left: (imageFrame.width() / 2) - (image.attr('width') / 2),
                top: (imageFrame.height() / 2) - (image.attr('height') / 2)});
}).trigger('reposition-image');

$('#controls input').change(function() {
    var jThis = $(this);
    var cDim = jThis.attr('id').replace(/^i/, '');

    var nSize = parseInt(jThis.val());

    if (!isNaN(nSize) && nSize != 0) {
        var outerFrame = $('#outer-frame');
        nSize = (nSize > outerFrame[cDim]() ? outerFrame[cDim]() : nSize);        
        $('#image-frame')[cDim](nSize).trigger('reposition-image');
    }
});
​