图像大小调整不模糊答案

【问题标题】：Image resizing without blurriness图像大小调整不模糊
【发布时间】：2018-11-27 15:02:13
【问题描述】：

为网站制作新横幅 - 问题是网站尺寸为 920w x 174H。我的 jpg 是 2892w x 499H。它更大，但无论它在页面上变小，所以我必须手动放大它 - 这会使图片模糊。我怎样才能得到正确的尺寸，这样我就没有模糊的照片了？

【问题讨论】：

请在您的问题中包含代码。
如果网站以 920x174px 显示横幅，为什么不创建一个该大小的 jpeg，这样浏览器就不需要调整大小并导致图片模糊？
我做了，但它没有像那个尺寸那样加载到网站上，所以我总是不得不手动做。

【解决方案1】：

横幅的img 标记是否包含width= 或height= 参数？或者是否有设置它们的 CSS 样式？例子：

<img src="img_banner.jpg"  width="500" height="600">
<img src="img_banner.jpg"  style="width:500px;height:600px;">

如果是这样，那就是强制网络浏览器将图像重新缩放到错误的大小。您可以使用各种图像处理程序（例如 IrfanView 或 Gimp）将新横幅调整为适当的大小，将其重新上传到您的网络服务器，然后包含适当的宽度和高度参数以加快页面呈现速度。

【讨论】：

我使用上面给出的代码=
preview.ibb.co/hseNjd/the_one.jpg" width="920" height="174">
我的问题是我不知道如何将其重做为 920x174 尺寸。
在irfanview.com下载Irfanview，以下链接为您提供调整大小的步骤：bleepingcomputer.com/forums/t/65221/…
我可以使用 Photoshop 吗？
向我们展示您的代码和图片。到这里打一个sn-p

【解决方案2】：

你试过这个 CSS 吗？

.img{
  -ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property)
  image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
  image-rendering: -webkit-crisp-edges; // Safari 7+
  image-rendering: -moz-crisp-edges; // Firefox 3.6+
  image-rendering: -o-crisp-edges; // Opera 12
  image-rendering: pixelated; // Chrome 41+ and Opera 26+
}

【讨论】：