Question

我正在尝试在我的图片上应用CSS3 image-resolution属性，但它没有效果，这是我的代码：

<!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>
</html>

Answer 1

首先，id属性必须是唯一的，所以避免给两个不同的元素提供相同的id（它只是在语义上不正确）

其次，您是否检查过浏览器是否了解该属性？我很确定这是一个非常特殊的属性，可能只有少数浏览器可以正确解释它。

我甚至不确定任何浏览器都可以处理这个属性，因为CSS3仍在开发中，只有最现代甚至尚未发布的浏览器版本才能解释它。

Answer 2

我没有测试但可能会工作=）

@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
    }
}

CSS3图像分辨率属性

2 个答案: