Question

我的图片（尺寸 - 1600×585，文件大小 - 292 KB，MIME类型 - 图片/ jpeg），自然尺寸 1600 x 585像素，并在页面上它需要 1903 x 580像素。

问题：在页面加载时，此图片显示为 small （不是自然大小），然后在页面上拉伸。当连接速度不快时，它看起来不太好。

我该如何解决这个问题？

img {height: 580px;position: absolute;width: 100%;z-index: 0;border: 0;vertical-align: top;}

Answer 1

更新回答：

.yourDiv {
   background-image: url('../path/to/your/image');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: fixed or scroll;
   background-attachment:fixed;
}

Answer 2

在css中调用图像作为背景时使用此功能

  background: url("ur image") no-repeat cover ;

有不同的功能对我来说封面工作很好......

Answer 3

CSS：

    body{
        background: url(../images/page_background.jpg) 0 0 repeat;
    }

Answer 4

CSS：

body{background-image:url('root/myimage.jpg'); background-repeat:no-repeat; margin:0;}

ALSO：

如果图像需要片刻加载，请设置背景颜色：

body{background-color:#333;}

Answer 5

在我的案例中，正确的解决方案是：

img{height: 580px; position: fixed; width: 100%;z-index:0;top: 0;left: 0;}

我尝试了所有其他答案，但每个都有一些'缺陷'（图像开始加载宽度然后拉伸）。感谢@Dylan de St Pern的建议，这有助于position:fixed。

在网页上加载大图像作为背景

5 个答案: