使用background-size进行协调：在从psd文件构建网站时进行协调？

当我使用background-size: cover;时，它会导致图像缩放以适合屏幕。这种缩放意味着背景图像与我试图复制的psd文件的尺寸不匹配。如何保持background-size: cover;提供的响应能力，同时保持psd的精确测量结果？非常感谢您的帮助。使用background-size进行协调：在从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%; 
}

来源

2015-01-21 Markus Hallcyon

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

？

来源

2015-01-21 00:59:03 Darkrum

这只是使图像更大，远远高于'背景大小：cover'。谢谢您的帮助！ – 2015-01-21 02:48:22

如果你的目的是使背景图像能长到源图像的最大“自然”的大小，然后不进行缩放任何较大，这也很可能要通过媒体查询某种组合（实现测试各种尺寸的纵向，横向和方形窗口大小），CSS或JavaScript。

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

来源

2015-01-21 05:46:13

我担心这一点。感谢您的洞察力。 – 2015-01-21 16:04:15

使用background-size进行协调：在从psd文件构建网站时进行协调？

回答

相关问题