Question

当我使用background-size: cover;时，它会使图像缩放得更大以适应屏幕。此缩放意味着背景图像与我正在尝试复制的psd文件的尺寸不匹配。如何保持background-size: cover;提供的响应能力，同时保持psd的精确测量值？非常感谢您的帮助。

HTML：

<body>
    <div class="bg-img"></div>
</body>

的CSS：

.bg-img {
    position: absolute;
    background: url(../images/site-bg.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

Answer 1

background: url(../images/site-bg.jpg) no-repeat center center;

Answer 2

如果您的目的是让背景图像能够发展到最大程度，那就是自然的＆＃39;源图像的大小，然后不再缩放，这可能必须通过媒体查询的一些组合（测试各种大小的纵向，横向和方形窗口大小），CSS或JavaScript来实现。

您可以考虑使用max-width和/或max-height属性以及top: 0; bottom: 0; left: 0; right: 0; margin: auto;。这可能会产生可接受的结果，但可能是JavaScript需要查找最可靠的结果。

使用background-size协调：从psd文件构建网站时覆盖？

2 个答案: