图像缩小CSS ...图像在几个浏览器中是模糊的 [英] Image downscaling with CSS … Images are blurry in several Browsers

问题描述

我在多个浏览器中存在降级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; 
  

}

< ：rotate（0deg）;让图像在firefox的几个版本中更清晰。 Chrome看起来完美，没有问题...但是Safari 7看起来很不爽...有人有一个想法我可以做什么？使用JS更改视网膜显示的图像？它不必降低这么多的信息？我知道缩小是不是一个非常聪明的解决方案，但我还能做什么响应图像缩放浏览器的宽度和高度？

谢谢！

解决方案

您可以尝试使用 image-rendering 属性，如下所示：）

浏览器 - 支持似乎是不好，但它应该适用于当前的Firefox，Safari和Opera。 （取自mozilla docs）

这是图片上使用的CSS：

  / *每个图像的容器* / 
 div 
 {
 width：200px; 
} 
 img 
 {
 max-width：100％; 
} 
 img.sharp 
 {
 image-rendering：-moz-crisp-edges; 
} 
 img.pixelated 
 {
 image-rendering：pixelated; 
} 
  

I'm having issues with downscaled IMGs in several browsers… The Images need to be downscaled because they're responsive to the browser size… This is my code:

#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;

}

The -moz-transform: rotate (0deg); lets the image get sharper in several versions of firefox. Chrome looks perfect, no problems… But Safari 7 looks very shitty… Does someone have an idea what i could do? Using a JS to change images for Retina Display? That it doesn't have to downscale so much information? I know that downscaling isn't a very smart solution, but what else could I do to have responsive images that get scaled while chaning the browsers width and height?

Thank You!

解决方案

You can try to use the image-rendering property, as seen here: https://developer.mozilla.org/de/docs/Web/CSS/image-rendering

Syntax:

• image-rendering: auto
• image-rendering: crisp-edges

• image-rendering: pixelated

• image-rendering: inherit

Here is an example demo: http://jsfiddle.net/UNLes/

Like seen in the demo, the first picture is not using the property at all, the second one is crisp and the last one should be pixelated but this seems not to work.

(Photo was taken from: http://lorempixel.com/)

The Browser-Support seems to be rather bad, but it should work for current Firefox, Safari and Opera. (Taken from the mozilla docs)

This was the CSS used on the images:

/*container for each image*/
div
{
    width: 200px;
}
img
{
    max-width: 100%;
}
img.sharp
{
    image-rendering: -moz-crisp-edges;
}
img.pixelated
{
    image-rendering: pixelated;
}

这篇关于图像缩小CSS ...图像在几个浏览器中是模糊的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！