Question

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

似乎我只能做其中一个，而不是两个。

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

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

我想如果我要使用：

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

或

body

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

我也试过提供max-height:100%代码<table class="tabulka"> <tr> <th>ID</th><th>Typ</th><th>Priorita</th><th>Aplikace</th><th>Souhrn</th><th>Hlásil</th><th>Stav</th><th>Termín</th><th>Akce</th> </tr> <tr *for="#x of datas"> <td>{{x.ID}}</td> <td>{{x.Type}}</td> <td *if="x.Priority == 1" ><img src="./img/red.png"></td> <td *if="x.Priority == 0"></td> <td>{{x.Aplication}}</td> <td>{{x.Summary}}</td> <td>{{x.Person}}</td> <td>{{x.State}}</td> <td>{{x.Date}}</td> <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td> </tr>，甚至是一个容器div同一属性，但没有运气......

有人能指出我正确的方向吗？

Answer 1

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

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

来自文档，关于cover：

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

Answer 2

这是你想要实现的目标吗？

https://jsfiddle.net/z9mc0g4t/

ModifyCars.java

Answer 3

试试这个 -

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

@ user3910071你也可以使用这段CSS进行img元素 -

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

在此处查看工作fiddle，调整结果窗口的大小，查看图片是否根据需要调整大小。

Answer 4

您可以使用：背景尺寸：封面; 要么 background-size：contains;

Answer 5

您希望您的图片宽度 - 高度应该跟随您的窗口宽度 - 高度始终具有真实的宽高比并且不会随时出现空白区域吗？

如果我理解正确，请尝试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() 
});

});

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

5 个答案: