Question

我的页面上有DIV个IMG s。在图像上单击时，它们会在灯箱中打开，但在DIV中，它们应该完全填充DIV，但保留纵横比。

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

所以我需要的是一种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);
    });
}

最后将set-opacity设置为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");
}

});

希望这有帮助。

Answer 2

这听起来类似于我想做的事情，我想我已经设法在没有Javascript的情况下实现它，但它需要一个虚拟的空白图像。我有一个1920x1537的图像，我希望将其显示在其他地方，剪切到16：9的宽高比，但反应灵敏。首先，我创建了一个空白的1920x720图像。我使用GIF，因为在这种情况下，它的文件大小（2.1KB）远小于PNG或JPEG。

HTML：

<div class="responsive-clipped mainphoto-margins">
    <img class="img-responsive" src="imgs/blank16x9.gif">
    <img class="img-responsive img-clipped" src="imgs/main9.jpg">
</div>

CSS：

.responsive-clipped {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.img-clipped {
    position: absolute;
    left: 0;
    top: -60%;
}

/* From Bootstrap */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

我使用top: -60%设置，直到它看起来正确。我不确定您是否可以实现50％的垂直居中，或者您是否必须根据宽高比进行计算。在后一种情况下，如果每个图像具有不同的宽高比，您可能最好坚持使用Javascript解决方案。

使用裁剪图像填充div，保留纵横比

2 个答案: