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

Question

我正在使用响应式图像技术，即将最大宽度设置为 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>

score 5 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2013-07-08T17:25:46.230 回答

3 回答 3