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

Question

我正在使用响应式图像技术，即根据屏幕分辨率/大小将max-width设置为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>

Answer 1

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

如果你有一个小图像正在扩大规模，你就会失去分辨率，没有选择。

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

Answer 2

如果您有非摄影图像

，请使用SVG

使用slimmage.js for photographs。

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

Answer 3

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