如何使响应式图像看起来清晰？答案

【问题标题】：How to make responsive images look crisp?如何使响应式图像看起来清晰？
【发布时间】：2012-08-07 08:06:47
【问题描述】：

我正在使用响应式图像技术，即将最大宽度设置为 100%，以根据屏幕分辨率/大小调整图像大小。但是，当我将图像放在具有百分比宽度的 div 中时，图像看起来并不清晰（因为我推测，它已通过浏览器调整大小）。图像上的文字相当模糊。有没有办法让它看起来很脆？或者至少让它在最常见的屏幕尺寸上看起来更清晰？

CSS：

img {
  max-width: 100%;
  height: auto;
}

.img-container {
  width: 57%;
}

HTML：

<div class="img-container">
  <img src="[img source]" width="700" height="500" />
</div>

【问题讨论】：

【解决方案1】：

使用 SVG 图像或使用名为 picturefill 的插件。

【讨论】：

【解决方案2】：

手动导出 14 个图像版本以支持 2013 年的分辨率范围是疯狂的。

【讨论】：

【解决方案3】：

如果您有一个要缩小的大图像，请先在矢量图形程序中调整它的大小，然后将其保存为首选大小，然后将其提供给客户端。

如果您有一个要放大的小图像，您将失去分辨率，别无选择。

这并不是一个真正的 CSS/HTML 问题，仅供参考，这是一个缩放问题。各种浏览器会使用各种缩放算法，所以结果会不一致。您必须抓住控件并强制浏览器显示您想要的图像，而无需缩放。 “响应式设计”的理论美的实际缺陷之一。

【讨论】：