Question

为网站制作新横幅 - 问题是网站尺寸为920w x 174H。我的jpg是2892w x 499H。这是更大，但无论它在页面上的更小，所以，我必须手动放大 - 这使pic模糊。如何以正确的尺寸获得它，以便我没有模糊的照片？

Answer 1

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

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

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

Answer 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+
}

图像调整大小没有模糊

2 个答案: