由于CSS，网站上的模糊图像？

Question

嘿伙计们，我有一些图片，我相信我的比例是按比例的，但它们显得模糊不清。

问题在于它们的宽度：100％，但我不明白的是我的图像大小与盒子一样大但是它们仍然显得模糊。

我想我不会得到什么是STRECHING图像，因为它们应该都是大小。

问题可能在于我的响应式CSS吗？如果我取下宽度：100％图像似乎转到我的响应大小.. ~310px x 180px。

通常情况下，我认为这是一个背景大小：问题，但我对此可能导致的不知所措。

Regular Code:
.special-offers { margin: 0 0 150px 0; position: relative; }
.special-offers .banner { width: 33.33%; max-height: 270px; float: left; text-align: center; position: relative; }
.special-offers .banner a { display: block; width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 2; }
.special-offers .banner a img { position: relative; z-index: 3; width: 100%; }

Responsive Code:
.special-offers { margin: 0 0 30px 0; }
.special-offers .banner { width: 100%; }
.special-offers .banner a { width: 300px; height: 180px; margin: 0 auto; padding: 0; }
.special-offers .banner h4 { margin: 0; }
.special-offers .banner a img { width: 300px; }

非常感谢任何帮助..

Answer 1

  

我想我不会得到什么是STRECHING图像，因为它们应该都是大小。

在您的示例中，情况似乎并非如此。您的实际图像尺寸小于预期。

Answer 2

要解决此问题，我在Shopify配置文件夹中找到了settings_shema.json。

我在这里找到了

 {
    "type": "image",
    "id": "banner_2_image.jpg",
    "label": "Image",
    "max-width": 1310,
    "max-height": 1180,
    "info": "(max size: 310px x 180px)"
  },

编辑max-width：和max-height允许我修复图像。本质上shopify正在调整图像的大小，然后我试图使小图像100％。