2014-11-05 1 views
0

현재 브라우저의 창 크기에 따라 이미지 크기를 줄이려고합니다. 이미지는 앵커 링크 내에 있으므로 클릭하면 홈 페이지로 이동합니다.<a> 태그 내의 이미지 크기 조정

내 문제는 크기가 조정될 때 앵커에 연결되는 이미지의 유일한 부분이 아래쪽의 작은 부분이거나 크기를 작게 조정하면 클릭 할 수있는 모든 기능이 사라집니다.

생각하십니까? 솔루션?

정말 이미지 맵을 만들고 자바 스크립트로 동적으로 크기를 조정하고 싶지는 않습니다.

HTML :

<a href="Index.html" id="leftNav"> 
    <img class="bar" id="leftBar" src="./files/images/Nav First.png" border="0" /> 
</a> 
<img class="bar" id="midBar" src="./files/images/Nav Select.png" border="0" /> 
<a href="#" onClick="goToLastComic(); return false;" id="rightNav"> 
    <img class="bar" id="rightBar" src="./files/images/Nav Last.png" border="0" /> 
</a> 

CSS :

나는이 방법으로 얻고 있었다 절대 위치와 형태를 가지고 내 problem-을 발견
.bar{ 
    display:inline-block; 
} 
#leftBar, #leftNav{ 
width:15%; 
height:auto; 
max-height: 83px; 
} 
#midBar{ 
width:55%; 
height:auto; 
max-height: 83px; 
} 
#rightBar, #rightNav{ 
width:15%; 
height:auto; 
max-height: 83px; 
} 
+2

앵커에게 속성 display : 블록을 주려고 했습니까? 그렇게해야합니다. #leftbar에서 지금까지 설정 한 앵커 너비, 높이 및 최대 높이를 지정해야합니다. –

+0

안타깝게도 내 탐색 막대가 기울어 져 있습니다.이 이미지 세 개가 가로로 나란히 있습니다. – KoalaFanatic

+0

내비게이션 막대의 요소를 인라인이 아닌 부동 요소로 만드십시오. –

답변

-1

. 나는 내가했던 것처럼 폼의 크기를 왜 설정했는지 모르겠지만 어리석은 픽스였다. 너비가 날 벗어 났을 때 100 %와 83px 높이가되었습니다. 자동 여백에 대해 알기도 전에 폼을 가운데에 맞 춥니 다.