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

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>

Answer 1

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

如果你有一个小尺寸的小图像,你将失去分辨率,没有选择.

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