从父级的绝对中心缩放内联图像？
我知道这是另一个集中问题，但我认为这与StackOverflow上的任何其他问题不同。 在有人说是的之前，我已经找到了一个解决方案，但一无所获。
为了更好地理解我的观点，我嘲笑了一个图像，让你知道我想要我的图像做什么： http ： //cl.ly/1q143w1P2p19322s2L0s
问题
我有一个流畅的，完整的浏览器宽度布局。 对于这个问题并更好地解释它我的图像设置为400％宽度（自动计算高度以保持其纵横比）。 因此，图像将填满整个屏幕（以及更多）。 我尝试的每个方法都使图像从容器的父/包装器的左上角开始缩放，因此图像的左上角始终在视图中，但我不希望这种情况发生。
相反，当您调整浏览器大小时，我希望我的图像的确切中心始终在视图中。 无论浏览器窗口的高度或宽度如何。
我希望一切都有道理，很难解释。 到目前为止，我已经尝试过纯CSS解决方案但到目前为止没有运气。 jQuery可以帮助我吗？
–
我尝试过这种技术（http://css-tricks.com/centering-in-the-unknown/），但图像从图像的左上角开始缩放，这不是我想要的。
如果你想要实现的只是将图像的中心保持在一个恒定的位置，那么你只需要调整图像的top和left属性，这样图像的中心就位于周围帧的中间。
计算只是找到你的框架的中点，它是沿着它的一半，并减去图像宽度的一半来找到你的左边位置，与顶部位置的高度相同。
我已经为你制作了一个演示程序来显示你，更改框中的宽度，最多500个，你会看到图像保持居中。
演示： http ： //jsfiddle.net/Orbling/ZZrjP/
居中图像 – 200×200 
居中图像 – 400×400 
我使用#outer-frame来表示你的窗口或你网站的外部div， #image-frame是你希望图像出现的大小。 如果您希望图像占据整个窗口，请省略外框的概念，并使用窗口作为图像框。
HTML：
Width: Height:
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'); } });