英雄形象变得模糊/低分辨率

Question

我最近试图更改主页上的英雄/横幅图像，并注意到在设置新图像后质量和分辨率降低了。即使我使用原始的5312x2988图像进行测试，质量仍然模糊不清。

主页是www.shiftins.com。这是显示问题的图像部分：

有人可以帮我确定一下CSS的哪个部分会造成这种影响吗？

以下是与上述图片进行比较的原始图片。

Answer 1

您现在使用的原始图片是1024px x 450px，每个 background-image: url(https://www.shiftins.com/wp-content/uploads/2016/01/cheap-insurance-california-1024x450.jpg);。但是，#top-wrap元素有一个max-height: 400px，因此您将开始在那里获得一些扩展问题。此外，在标准的1080p桌面分辨率上，宽度约为1980px。

您可以使用高分辨率原稿制作1980px×400px版本，并使用@media来调用一个或两个其他屏幕尺寸吗？

Answer 2

诺亚的答案指向正在发生的事情，但错过了问题取决于浏览器的宽度。

查看网站，图片随浏览器宽度而变化。窗口狭窄时，图像清晰。当窗口超出图像宽度时，图像被放大，因此变得模糊。当前的“src”图像http://www.shiftins.com/wp-content/uploads/2016/01/cheap-insurance-california-1024x450.jpg为1024宽。比这更宽泛，你会变得模糊。

正如BoltClock在评论Noah的答案时建议的那样，当你试图上传完整分辨率时，你无法获得更大的图像。

要解决：在浏览器中保存页面的html，并找到提及该图像路径的行。根据浏览器和换行，靠近第260或270行，li id =“nav-menu-item-1443”.. background-image：url（https://www.shiftins.com/wp-content/uploads/2016/01/cheap-insurance-california-1024x450.jpg）; ..

现在以更高的分辨率上传。

刷新客户端浏览器，并保存页面html。它仍然引用1024x450.jpg图像吗？如果是这样，那么这就是你的问题 - 你没有获得更高的分辨率。

替代解决方案：更改窗口超出图像宽度时发生的情况。不要让页面主体宽度超过1024，或者图像宽度不超过。

优点＃1：减少带宽使用，因为您不会增加源图像文件大小。

好处＃2：更好地控制图像的哪个部分显示。 （你会看到我的意思，如果你在一个巨大的显示器上显示当前页面，全屏 - 只有车顶可见 - 不好，因为汽车是你的主题。）

限制页面宽度的代码：

- 有人请编辑此答案以建议如何操作？ -