从父项的绝对中心缩放内联图像？

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');
    }
});
​