브라우저로 확대/축소하면서 이미지 위에 마우스를 놓기

Question

브라우저의 크기에 따라 다른 이미지의 크기가 조정되면 다른 이미지로 변경되는 이미지를 만들려고합니다.

내가 지금까지 가지고있는 CSS 코드는 이것이다 :

<img id="a_Cscaleskb" src="../../images/a_Cscaleskb_up.gif" alt="" /> 

이 호버의 이미지를 변경하는 위대한 작품을하지만 브라우저를 축소 할 때 아무튼 : html로와

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 

#a_Cscaleskb{ 
    width:0px; 
    height:0px; 
    background:url('../images/a_Cscaleskb_up.gif'); 
    padding:47px 114px; 
} 

#a_Cscaleskb:hover { 
    background: url('../images/a_Cscaleskb_over.gif'); 
} 

변화는 없어.

이

#a_Cscaleskb{ 
background:url('../images/a_Cscaleskb_up.gif'); 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-repeat: no-repeat; 
background-size: contain; 
} 

#a_Cscaleskb:hover { 
background: url('../images/a_Cscaleskb_over.gif'); 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-repeat: no-repeat; 
background-size: contain; 
} 

이 CSS를 제대로 유혹에 확장,하지만 당신은 두 이미지가 서로에 걸쳐 누워 볼 수 있습니다

내가 해봤 코드의 또 다른 조각

이있다. 나는 자바 스크립트를 사용하는 것도 가능하다는 것을 알고 있지만 사용을 피하려고합니다. 어떤 제안이라도 대단히 감사하겠습니다.

Answer 1

당신은 브라우저의 크기에 따라 이미지 크기를 조정할 경우이 코드 비열한 비트를 사용 : 내가 www.busyfeet.rachelgallen.com 내 갤러리 페이지에 사용했습니다 무엇

img{max-width:100%;width:auto;height:auto} 

는 - 그것에게 모양을 제공하고 참조 작업 중