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

Question

我在几个浏览器中出现缩小尺寸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：rotate（0deg）;让几个版本的firefox中的图像变得更清晰。 Chrome看起来很完美，没问题......但Safari 7看起来非常糟糕......有人知道我能做些什么吗？使用JS更改Retina Display的图像？它没有必要缩减这么多信息吗？我知道缩小尺寸并不是一个非常聪明的解决方案，但我还能做些什么才能在浏览器宽度和高度的同时获得缩放的响应式图像？

谢谢！

Answer 1

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

语法：

  

  
• image-rendering：auto
  
• 图像渲染：清晰边缘
  

• 图像渲染：像素化

  

• 图像渲染：继承

  

以下是演示示例：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;
}