CSS3 image resolution property_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-12 04:58 出处：网络

I\'m trying to apply CSS3 image-resolution property on my image but it has no effect, this my code: <!DOCTYPE html>

相关专题：css

I'm trying to apply CSS3 image-resolution property on my image but it has no effect, this my code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

<title>resize image </title>
<style>
.high{ image-resolution:300dpi;}
.low{ image-resolution:0dpi;}
</style>
</head>

<body>
<img   class="low"id="img1" src="orginal.jpg" border="0" />

<img   class="high"id="img1" src="orginal.jpg" border="0" />
</body>
</开发者_JAVA百科html>

First of all, the id attribute has to be unique, so avoid giving two different elements the same id (it's just semantically incorrect)

Secondly, did you check that your browser understands the property? I'm quite sure that this is a very special property and probably only a few browsers may interpret it correctly.

I'm not even sure any browsers can handle this property at all, as CSS3 still is in development and only the most modern or even not yet released versions of browsers might be able to interpret it.

I have not tested but might work =)

@media  screen ( min-resolution: 300dpi) {
    img{
        image-resolution: 300dpi; 
        width: 50%;
        height: auto;
    }
}
@media  screen ( min-resolution: 72dpi) {
    img{
        image-resolution: 72dpi;
        width: 100%;
        height: auto
    }
}