Question

我有一张大小为1MB的.png格式高清图像。我想把这个图像适合背景。所以我的css如下，

html{
    background: url("<%=request.getContextPath()%>/images/Frame_73_.png")no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    babackground-size: cover;
    min-width: 100%;
    min-height: 100%;
}

这里的图像是伸展的。我想要精确的图像适合屏幕。我怎样才能做到这一点。任何人都可以帮我这个。

Answer 1

背景大小的css中有拼写错误：

babackground-size: cover; // extra ba

如果您希望图像覆盖带裁剪的背景，这应该有效：

background-size: cover;

如果您希望背景占据整个宽度并根据需要缩放以适合，请使用：

background-size:contain;

Answer 2

试试这段代码：

background-size:100% 100%;

注意：它取决于页面的高度！（100％ 100％）

您可以手动尝试此代码设置高度：

background-size: 100% 900px;

在JSFIDDLE

上查看

如何使图像适合浏览器屏幕

2 个答案: