css - css 中 max-width:100% 时图像分辨率很差 - 缩小

Question

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

这是HTML：

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

用于<img>：

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

用于<span>：

.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;
}

（有多个类，因为原始代码来自模板，我只是对其进行修改。如果您知道如何使这更简单，请告诉我！）

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

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

我也看过一个Similar Question Here，但没​​有太大帮助。

我也尝试使用Picturefill，我无法完全理解如何在我的情况下使用它。

Answer 1

也许是关于纵横比。通过height: auto在图像上使用一个，这将解决这个问题。给容器，在这种情况下，<span>最大宽度为 100%，然后将图像的宽度设置为您想要的。现在图像将具有正确的宽度/高度比。

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

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