从父级的绝对中心缩放嵌入式图像? [英] Scaling an inline image from the absolute center of its parent?

问题描述

我知道这是另一个中心问题，但是我认为这与StackOverflow上的其他任何问题都不相同.在有人说是之前，我一直在寻找解决方案，但一无所获.

I know this is another centering question but I think this is different to any of the others on StackOverflow. Before anyone says it yes I have searched for a solution but found nothing.

为了更好地理解我的观点，我模拟了一张图像，以使您了解我想要我的图像做什么:

To get my point across better I've mocked up an image to give you an idea of what I would like my image to do: http://cl.ly/1q143w1P2p19322s2L0s

问题

我有一个流畅的，完整的浏览器宽度布局.为了更好地解释这个问题，我的图像设置为400％的宽度(自动计算高度以保持其长宽比).因此，图像将填满整个屏幕(甚至更多).我尝试过的每种方法都会使图像从容器的父容器/包装器的左上方缩放，因此始终可以看到图像的左上方，但是我不希望这种情况发生.

I have a fluid, full browser width layout. For this question and to explain it better my image is set at 400% width (height calculated automatically to maintain its aspect ratio). So therefore the image will fill the entire screen (and more). Every method I have tried makes the image scale from the top left of the parent/wrapper of the container so the top left hand side of the image is always in view but I don't want this to happen.

相反，我希望在调整浏览器大小时始终可以看到图像的确切中心.无论浏览器窗口的高度还是宽度.

Instead, I want the exact center of my image to always be on view when you resize the browser. No matter the height or width of the browser window.

我希望一切都有意义，这很难解释.到目前为止，我已经尝试过纯CSS解决方案，但到目前为止还没有碰到运气. jQuery可以帮助我吗?

I hope that all makes sense, its quite hard to explain. I've tried pure CSS solutions so far but no luck so far. Can jQuery help me?

-

我尝试过这种技术(http://css-tricks.com/centering-in-the-unknown/)，但是图像从图像的左上方缩放，这不是我想要的.

I have tried this technique (http://css-tricks.com/centering-in-the-unknown/) but the image scales from the top left of the image, which isn't what I want.

推荐答案

如果您要实现的只是将图像中心保持在恒定位置，则只需调整top和left图像的属性，以便图像的中心位于周围框架的中间.

If all you are trying to achieve is keeping the centre of an image in a constant position, then you just need to adjust the top and left properties of the image, so that the centre of the image lies in the middle of the surrounding frame.

计算只是找到框架的中点，即沿框架的中点，然后减去图像宽度的一半即可找到左侧位置，与顶部位置的高度相同.

The calculation is simply finding the midpoint of your frame, which is half way along it, and subtracting half the width of the image to find your left position, the same with heights for the top position.

我为您制作了一个演示程序来演示，更改框中的宽度(最大为500)，您将看到图像居中.

I have made you a demonstration program to show you, change the widths in the box, maximum of 500, and you will see the image stays centred.

演示: http://jsfiddle.net/Orbling/ZZrjP/

中心图片-200x200

中心图片-400x400

我正在使用#outer-frame表示您的窗口或网站的外部div，#image-frame的大小是您希望图片显示的大小.如果您希望图像占据整个窗口，则无需使用外框的概念，而是将窗口用作图像框.

I am using the #outer-frame to represent your window, or outer div of your website, the #image-frame is whatever size you want the image to appear at. If you want your image to occupy the full window, dispense with the concept of the outer frame and use the window as your 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;指令，这些指令可确保位置相对于容器，如果位置相对于页面，则计算需要偏移.

Note the position: relative;​ directives, these ensure the positions are relative to the container, if they were relative to the page, the calculations would need to be offset.

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

这篇关于从父级的绝对中心缩放嵌入式图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！