使用 CSS 缩小图像…图像在几个浏览器中模糊

Posted 2023-03-06

【中文标题】使用 CSS 缩小图像…图像在几个浏览器中模糊

【英文标题】：Image downscaling with CSS … Images are blurry in several Browsers

【发布时间】：2014-09-23 12:39:12

【问题描述】：

我在几个浏览器中遇到了缩小 IMG 的问题......图像需要缩小，因为它们会响应浏览器大小......这是我的代码：

#pic-holder img 
    -moz-transform: rotate(0deg);
    /*image-rendering:-webkit-optimize-contrast;*/
    max-width: 70%;
    width:900px;
    height: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:1;

-moz-transform: 旋转(0deg);让图像在几个版本的 Firefox 中变得更清晰。 Chrome 看起来很完美，没有问题……但 Safari 7 看起来很糟糕……有人知道我能做什么吗？使用 JS 更改 Retina Display 的图像？它不必缩减这么多信息吗？我知道缩小不是一个非常聪明的解决方案，但我还能做些什么来让响应式图像在改变浏览器宽度和高度的同时进行缩放？

谢谢！

【参考方案1】：

您可以尝试使用image-rendering 属性，如下所示：https://developer.mozilla.org/de/docs/Web/CSS/image-rendering

语法：

图像渲染：自动 图像渲染：边缘清晰

图像渲染：像素化

图像渲染：继承

这是一个示例演示：http://jsfiddle.net/UNLes/

就像在演示中看到的那样，第一张图片根本没有使用该属性，第二张是清晰，最后一张应该是像素化，但这似乎不是上班。

（照片取自：http://lorempixel.com/）

浏览器支持似乎相当糟糕，但它应该适用于当前的 Firefox、Safari 和 Opera。 （取自 Mozilla 文档）

这是图片上使用的 CSS：

/*container for each image*/
div

    width: 200px;

img

    max-width: 100%;

img.sharp

    image-rendering: -moz-crisp-edges;

img.pixelated

    image-rendering: pixelated;

【讨论】：

谢谢！是的，-moz-crisp-edges 确实有效果，但它太强了！嗯，使用 A 固定缩放是否更好，例如从 1800px 到 900px 到 450px 以避免模糊？

@CyrillKuhlmann 能否更改我的 jsFiddle 演示（只需更改内容，按更新并分享 url）让我看到您不想看到的效果吗？可以放两张图片：一张的尺寸可以让图片看起来像你想要的那样，另一张图片不那么清晰。

我会试试的……但我对 jsFiddle 还不是很熟悉，抱歉……