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

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一个或两个其他屏幕尺寸的电话吗？