2010-08-16 4 views
0

내 이미지 CSS3 image-resolution 속성을 적용하기 위해 노력하고 있지만,이 내 코드에는 영향을 미치지 않습니다 : 모든CSS3는 이미지 해상도 속성

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

답변

3

첫째는 id 속성은 고유하므로 피할 수있다 두 개의 다른 요소에 동일한 ID를 부여합니다 (의미 상 올바르지 않습니다)

두 번째로 브라우저가 해당 속성을 이해했는지 확인 했습니까? 나는 이것이 매우 특별한 속성이며, 아마도 소수의 브라우저 만 올바르게 해석 할 수있을 것이라고 확신한다.

CSS3는 아직 개발 중이며 가장 최신 버전이거나 아직 출시되지 않은 브라우저 버전만으로도이 속성을 전혀 처리 할 수 ​​없다고 확신하지 못합니다. 내가 테스트하지 않았습니다 만 작동 할 수 있습니다

0

=)

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