0

我DIV的页面上有 s 包含IMGs。单击图像时，它们会在灯箱中打开，但在 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);
    });
}

最后将 set-opacity 设置为 1 是因为我只想在完成调整大小后显示图像，所以我在 CSS 中将它们设置为 opacity:0 ，然后在调整大小后显示它们。

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

4

2 回答 2

3

这将需要一个 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");
}

});

希望这可以帮助。

于 2013-05-11T02:19:26.533 回答
0

这听起来类似于我想做的事情，我想我已经设法在没有 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 解决方案。

于 2017-02-17T15:16:49.973 回答