CSS3 image resolution property
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
}
}
加载中,请稍侯......
精彩评论