当最大宽度：css中的100％-缩小尺寸时，图像分辨率很差

Question

如何修复CSS，以便在缩小时不会丢失分辨率？

这里是HTML：

<span class="image main small"><img src="images/example.png" alt="" /></span>

<img>的CSS：

.image.main img {
    width: 100%;
}
.image img {
    border-radius: 0px;
    display: block;
}

[C0的CSS：

<span>

（有多个类，因为原始代码来自模板，我正在对其进行修改。如果您知道如何简化此过程，请告诉我！）

该演示的屏幕截图如下。注意图像分辨率差。原始的example.png非常清晰，分辨率很高。

如何修复CSS，以便在缩小时不会丢失分辨率？

.image.small {
    padding: 2.5em 6em 0.8em 6em;
    max-width: 100%;
}
.image.main {
    display: block;
    margin: 0 0 1.5em 0;
    max-width: 100%;
}
.image {
    border-radius: 4px;
    border: 0;
    display: inline-block;
    position: relative;
}

我也看过，但并没有太大帮助。

我也尝试过使用Similar Question Here，我无法完全理解如何根据自己的情况使用它。

Answer 1

也许与纵横比有关。通过在图像上使用Picturefill，可以解决该问题。给容器（在这种情况下为height: auto）的最大宽度为100％，然后根据需要设置图像的宽度。现在，图像将具有正确的宽高比。

<span>