와 링크/DIV 크기 조정 : 모바일 장치

Question

내가 모바일 장치에 대한 다음 사이트를 최적화하기 위해 노력하고있어 대한 호버 선택을 : http://whitehallrow.com/

때 이미지를 변경하기 위해 CSS 호버 선택기를 사용하여 블루 리본 링크 기능 위에 덮 쳤다 :

.ribbonlinkA{ 
    background-image:url("/wp-content/uploads/2013/05/hr_slide_off.png"); 
    display:block; 
    height:86px; 
    width:512px; 
} 
.ribbonlinkA:hover{ 
    background-image:url("/wp-content/uploads/2013/05/hr_slide_on.png"); 
    display:block; 
    height:86px; 
    width:512px; 
} 

나는 검은 딸기에 잘 크기를 재조정하는 페이지에 심상을위한 폭 : 100 %를 사용하고있다. 그러나, 나는 리본 링크를 전혀 크기를 조정할 수 없습니다. 폭이 100 % 인 경우에도 페이지의 오른쪽에서 단순히 오버 플로우됩니다.

어떻게 적절하게 크기를 조정할 수 있습니까?

Answer 1

CSS 배경을 확장하려면 background-size 속성 (모든 브라우저에서 지원되지 않음)을 사용해야합니다. 사용중인 더 큰 이미지 (> 320px)의 경우 자바 스크립트로 전환 된 <img> 요소를 사용하는 것이 더 나을 것입니다.