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

谢谢你！

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