Question

我希望我的背景图片在用户放大网站时放大。而且我还需要滚动条出现。例如here

当屏幕宽度为882像素时，让背景开始放大在此之前，背景的宽度必须保持相同的大小。我可以这样写：

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  position: absolute;
  background-size: cover;
  background: url('https://s1.1zoom.ru/big0/34/322924-alexfas01.jpg') no-repeat center center;
}

@media screen and (max-width: 882px) {
  body {
    background-size: 350%;
  }
}

但是当屏幕宽度为400像素时，图像太小。在顶部和底部是一些没有背景图像的区域，看起来很糟糕。

[ background image 400px]

当屏幕尺寸为250像素时存在同样的问题。

[ background image 250px]

所以我必须写几个媒体请求。这种方法不方便。百分比的值取决于图像的大小。而且背景的规模变化很大，而不是很顺利。

请告诉我，我怎样才能让背景图像放大..

Answer 1

我已经占用了一个网格容器，它有一个单行和一列，占用整个屏幕大小并为其分配背景图像。

body{
    margin:0;
}
.container {
    display: grid;
    grid-template-columns: repeat(1, minmax(882px, 1fr));
    grid-template-rows: 100vh;
}
.container > div{
    background: url("https://s1.1zoom.ru/big0/34/322924-alexfas01.jpg") no-repeat center center;
    background-size:cover;
}

<html>
    <body>
        <div class="container"><div>
            Hello
        </div></div>
    </body>
</html>

背景图像平滑缩放

1 个答案: