Chrome，使用 width="100%" 时，图像变得模糊？答案

【问题标题】：Chrome, when using width="100%", images become blurred?Chrome，使用 width="100%" 时，图像变得模糊？
【发布时间】：2012-12-06 08:12:42
【问题描述】：

我使用的是谷歌浏览器，并且有 1440 像素宽的显示屏。我制作了大约那么宽的图像，每当我将属性 width="100%" 与 img 标签一起使用时，它都会使图像模糊。

但是，当我添加它时，它会将图像缩小到确切的屏幕尺寸。

不确定这是 Chrome 问题，还是有其他方法。

谢谢！

【问题讨论】：

你的图片尺寸是多少？
我目前使用的图片尺寸为 1440x94。
虽然，我希望用多张图片来做到这一点。
右键&“检查元素”，注意图像的尺寸。看看它是缩小还是放大。
这就是它模糊的原因。您最好将其设置为实际像素/保持未设置。

标签： google-chrome tags width image

【解决方案1】：

试试这个 CSS：

image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

| https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

【讨论】：

【解决方案2】：

我遇到了同样的问题，只是在 chrome 上。我使用带有背景图像的 div 的解决方法，模糊消失了。

【讨论】：

【解决方案3】：

您可能误解了 100% 的含义。 width 的值不是针对图像本身，而是针对父级的宽度。因此，您可能需要将宽度指定为 width="1440" 或使用 css 样式 width:1440px 或不设置以保持原始大小（不推荐，因为它有时可能会在加载期间导致布局错误）

【讨论】：