Question

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

注意：我需要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;
        }

Answer 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）

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

1 个答案: