Question

我正在使用谷歌浏览器，并拥有1440像素宽的显示屏。我制作了关于那个宽的图像，每当我使用img标签的属性width =“100％”时，它会模糊图像。

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

不确定这是否是Chrome问题，或者还有其他方法可以解决这个问题。

谢谢！

Answer 1

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

Answer 2

我遇到同样的问题，仅适用于chrome。我对具有背景图片的div使用解决方法，模糊消失了。

Answer 3

试试这个 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

Chrome，当使用width =“100％”时，图像变得模糊？

3 个答案: