在保持全屏高度的同时居中图像

【问题标题】：Center an image while keeping full screen height在保持全屏高度的同时居中图像
【发布时间】：2014-05-09 21:23:43
【问题描述】：

即使窗口变小，我也希望图像保持浏览器窗口的整个高度。这似乎可以解决问题。然而，目前，图像仍然锚定在屏幕的左侧，而图像的右侧是随着窗口大小调整而丢失的。相反，我希望图像从两侧切开，留下居中的图像。这可能吗？

注意：我需要 div 中的图像，而不是设置为背景。

谢谢！

这是我目前使用的 CSS：

.div
        {
        min-height:100%;
        min-width:100%;
        text-align:center;
        overflow: hidden;
        margin: 0 auto;
        }
.img
        {
        min-height:100%;
        min-width:100%;
        margin: 0 auto;
        }

【问题讨论】：

标签： image screen center cover

【解决方案1】：

类似的东西？

var origWidth;
$(document).ready(function() {
    origWidth = $(window).width();  //store the window's width when the document loads
    origHeight = $(window).height();  //store the window's width when the document loads
});

$(window).resize(function() {
    var curWidth = $(window).width(); //store the window's current width
    var curHeight = $(window).width(); //store the window's current height
    var deltaTop = (curWidth- origWidth);
     var deltaLeft = (curHeight- origHeight);
    $("#image1").offset({top:($("#image1").offset().top + deltaTop)});
     $("#image1").offset({left:($("#image1").offset().top + deltaLeft)});
    origWidth = curWidth;
    origHeight =curHeight;
});

JsFiddle

（受此问题解决方案的启发：link）

【讨论】：

您在我的 jsfiddle 链接中查看了吗？您需要点击顶部的“运行”