CSS 图像渲染解决方案

发布于 2024-09-09 12:31:41 字数 130 浏览 3 评论 0原文

我的网站上有一个可缩放的图像。当图像大幅缩小时,它看起来非常锐利且难看。

我尝试使用图像渲染:optimizequality、optimizespeed CSS,但没有成功。

还有其他出路吗。

谢谢

I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.

I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.

Is there any other way out.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

月光色 2024-09-16 12:31:43

我会简单地编辑图片而不是 CSS。

尝试逐步使图片稍大一些,同时确保图片不会(我们用丹麦语称呼它,不确定英语是否正确)“像素化”。

这可以通过从 The Gimp-shop 到 Photoshop 的各种图像编辑程序来完成。

I would simply edit the picture instead of the CSS.

Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".

This can be done in various image editing programs from The Gimp-shop to Photoshop.

千纸鹤带着心事 2024-09-16 12:31:43

图像的大小并不需要调整那么多。将图像视为图表,其中每个像素都是图表中的单个正方形。如果拉伸图像,实际上就是使像素拉伸。有些程序尝试用他们认为适合的像素填充这些像素,另一些程序只是使像素更大,而另一些程序只是用相同的像素填充周围区域以赋予其某种发光效果。缩小图像大小虽然效果更好,但也会产生相同的效果,因为您只是砍掉像素而不是添加像素。我见过的大多数程序都会将像素挤压在一起,组合这些像素中的任何颜色。如果你有一个高细节图像,那么砍掉像素会让它看起来很糟糕。没有真正安全的方法来确定需要保留哪些像素以保持整体图像完好无损。大多数具有缩放功能的网站都有一个更大的图像,该图像已被缩小,并且可以让您缩放以查看较大图像的细节。有些人甚至会获得大量详细图像和较小预览图像的单独图像。

Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.

情绪操控生活 2024-09-16 12:31:42

根据 MDC 上的 image-rendering,< code>image-rendering 目前仅在 Firefox 3.6 中受支持。类似的属性 -ms-interpolation-mode 适用于 IE7 和 IE8。其他浏览器似乎还没有此功能。

正如 latze 提到的,最好的选择是编辑图像本身,将其缩放到您需要的级别。我不确定,但您可以尝试使用 来执行您想要的插值。

According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).

As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文