根据高度调整图像大小以适合页面

Question

我遇到了问题。我有一个方形图像 (2048x2048) 想用作背景。我想要它，这样当页面被拉伸到宽屏纵横比时，页面上就会有边框。我还想要它，以便当页面的宽度小于纵横比时，图像会调整大小以保持其方形。

看来我只能做其中之一，不能同时做。

如果我在图像上使用：height:100% 作为 CSS 属性，它适用于更大的屏幕尺寸，但当屏幕变小时，图像不会调整大小以适应我的水平滚动条。

另一方面，如果我使用：width:100%;作为 CSS 属性，它适用于小屏幕，但一旦调整大小以适应全屏，我就会得到垂直滚动条...

我想如果我要使用：

width:100%;
height:100%;

或

max-width:100%;
max-height:100%;

它会起作用，但显然不是......

我也尝试过给bodytag max-height:100%，甚至是容器 div 赋予相同的属性，但没有运气......

谁能指出我正确的方向？

Answer 1

试试这个 -

body {
background-image: url('imageurl.png');
background-size: contain;
}

@user3910071 你也可以用这段 CSS 来处理img 元素 -

img {
    max-width: 100vw;
    max-height: 100vh;
}

在此处查看有效的fiddle，调整结果窗口的大小并查看图像是否根据您的需要调整大小。

Answer 2

您希望您的图像宽度-高度始终遵循您的窗口宽度-高度，并且始终具有真实的纵横比并且任何时候都没有空白？

如果我对你理解正确，试试this

$(function() {

// responsive wallpaper
var img = $('.big_backgrounds img');
function bigPic() {
    if ( img.width() < $(window).width() ) {
        $('.big_backgrounds img').css({
            'width': '100%', 
            'height':'auto', 
            'left':'0', 
            'margin-left':'0'
        });
    } else if ( 
        img.outerHeight() > $(window).outerHeight() ) {
        img.css({
            'width': '100%', 
            'height':'auto', 
            'left':'0', 
            'margin-left':'0'});
    } else {
        img.css({
            'width': 'auto', 
            'height':'100%', 
            'left':'50%', 
            'margin-left': -(img.width()/2) });
    }
} 
bigPic();
$(window).resize(function () { 
    bigPic() 
});

});

Answer 3

您可以使用： 背景尺寸：封面； 要么 背景大小：包含；

Answer 4

这就是你想要达到的目标吗？

https://jsfiddle.net/z9mc0g4t/

body {
    background-image: url("http://thefoxisblack.com/desktop-wallpaper/Slumber-wallpaper-ipad.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 5

您能否给body 提供背景并指定background-size 的值为cover？

body {
  background: url("2048x2048.png");
  background-size: cover;
}

来自文档，关于cover：

与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像被裁剪为左/右或上/下。除非被其他属性（例如 background-position）覆盖，否则图像会自动居中。