2

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

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

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

谢谢！

4

3 回答 3

1

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

于 2012-12-19T02:37:21.947 回答
0

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

于 2020-02-17T16:50:48.683 回答
0

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

于 2021-07-06T15:01:37.707 回答