html - 用裁剪后的图像填充 div，保持纵横比

Question

我的页面上有 DIV，其中包含 IMG。单击图像时，它们会在灯箱中打开，但在 DIV 内部，它们应该完全填充 DIV，但保持宽高比。

这是我到目前为止所取得的成就，问题是当图像处于纵向模式时，纵横比不会保留。

http://jsfiddle.net/btvET/1/

所以我需要的是一种 CSS 方法，使图像垂直和水平居中，同时完全填充环绕 DIV(当然还裁剪图像的溢出部分)。

这可能吗，仅 CSS，还是需要 JS？浏览器兼容性为 IE8 及更高版本和所有现代浏览器。

用 JS/JQuery 解决了这个问题:

function resizeImages(){
    $("#container img").each(function() {
        var thisHeight = $(this).height();
        var thisWidth = $(this).width();
        var containerWidth = $(this).parent().width();
        var containerHeight = $(this).parent().height();
        var diff = 0;
        if(thisHeight > thisWidth){
            //portrait
            $(this).css("width","100%");
            thisHeight = $(this).height();
            diff = thisHeight - containerHeight;
            $(this).css("margin-top",-(diff/2));
        }
        else if(thisWidth > thisHeight){
            //landscape
            $(this).css("height","100%");
            var thisWidth = $(this).width();
            if(thisWidth < containerWidth){
                $(this).css("width", containerWidth);
                thisWidth = containerWidth;
            }
            diff = thisWidth - containerWidth;
            $(this).css("margin-left",-(diff/2));
        }
        $(this).css("opacity",1);
    });
}

最后将不透明度设置为 1 是因为我只想在调整大小后显示图像，所以我在 CSS 中将它们设置为不透明度:0，然后在调整大小后显示它们。

这适用于所有容器宽度和图像模式。

Answer 1

这将需要一个 Javascript 实现。使用 jQuery，您可以检查高度是否大于宽度，反之亦然。

你可以这样做:

$(".container img").each(function(){
var thisWidth = $(this).width();
var thisHeight = $(this).height();

if(thisWidth > thisHeight) {
    $(this).css("width", "auto");
    $(this).css("height", "100%");
} else if(thisHeight > thisWidth) {
     $(this).css("width", "100%");
     $(this).css("height", "auto");
}

});

希望这对您有所帮助。