Question

我正在尝试调整响应式全屏图像以适应浏览器窗口，而不会发生任何裁剪。

到目前为止，我的起点是在图像上设置max-width: 100%，以便填充页面的宽度。但是，如果窗口的高度发生变化，我需要将其从max-width: 100%切换为max-height: 100%，以便图像永远不会裁剪。

我能想到的唯一方法是找出哪个方面更大，然后将CSS更改为相应地使用max-width: 100%或max-height: 100%。

到目前为止，这是代码。它适用于按宽度调整大小而不是按高度调整大小：

$(document).on("ready", function() {

    resizeImage($("#image"), $(window));

    $(window).on("resize", function() {
        resizeImage($("#image"), $(window));
    });

});

function resizeImage(image, container) {

    var widthRatio = Math.min(image.width() / container.width()),
        heightRatio = Math.min(image.height() / container.height());

    if (heightRatio > widthRatio) {
        image.css({
            "max-width" : "none",
            "max-height" : "100%"
        });     
    }
    else {
        image.css({
            "max-width" : "100%",
            "max-height" : "none"
        });
    }
}

这是标记：

<div class="imageContainer">
    <img src="ferrari5.jpg" id="image">
</div>

这是CodePen示例：

http://cdpn.io/yAHeb

Answer 1

容器最大宽度：100％，最大高度：100％？如果不是，您只是将问题从图像转移到容器。一个jsfiddle.net会有所帮助。

很高兴这有助于：）

Answer 2

您是否尝试使用CSS：

background-size: cover;

希望它有所帮助！

无需裁剪的响应全屏图像

2 个答案: