브라우저 크기와 함께 이미지의 크기를 조정하지만 가로 및 세로 HTML의 경우 %가 다릅니다

Question

둘러 본 적이 있지만이 정확한 주제에 대한 정보를 찾을 수 없기 때문에 도움을 얻을 수 있기를 바랍니다.

테이블의 브라우저 오른쪽에 클릭 가능한 링크로 클릭 할 수있는 이미지가 있습니다. 가로 및 세로 이미지입니다. Landscape 이미지는 900 x 700 pxl이고 Portrait 이미지는 540 x 700입니다. 가로 이미지가 900 x 700으로 최대가되도록하고 브라우저 크기를 조정하면 축소됩니다.

아래 코드로 이미지의 크기를 조정할 수있었습니다.

<script type="text/javascript"> 

var image = new Array("jpegs/pict1.jpg", "jpegs/pict2.jpg", 
"jpegs/pict10.jpg", 
"jpegs/pict9.jpg" 
) 

하지만, 세로 이미지뿐만 아니라 내가 그들에게 540 X 700 최대 숙박 및 축소 할 경우에도 900 폭까지 왜곡됩니다 :

img src="jpegs/pict1.jpg" width="100%" alt="" name="slideImage"/ 

나는 자바 스크립트에서 이미지가 따라서. 거기에 추가 할 수있는 코드가 있습니까?

Answer 1

요소를 줄이려면 resize 이벤트에서 eventHandler를 사용해야하고 크기를 조정할 필요가있는 clientWidth 및 Height를 가져와 javascript를 통해 크기를 조정해야합니다. exactley에게 필요한 최대 및 최소 크기와이 스크립트에서 지원할 수있는 최대 및 최소 해상도를 말할 수 있다면 좀 더 관련있는 코드를 제공 할 수 있습니다.

window.$getView = function() { 
     var ret = { 
      width : 0, 
      height : 0, 
      element : null 
     }; 
     if(typeof window.innerWidth != 'undefined') { 
      ret.width = window.innerWidth; 
      ret.height = window.innerHeight; 
      ret.element = window; 
     } else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
      ret.width = document.documentElement.clientWidth; 
      ret.height = document.documentElement.clientHeight; 
      ret.element = document.documentElement; 
     } else { 
      ret.width = document.getElementsByTagName('body')[0].clientWidth; 
      ret.height = document.getElementsByTagName('body')[0].clientHeight; 
      ret.element = document.getElementsByTagName('body')[0]; 
     } 
     return ret; 
    } 

window.addEventListener("resize",resizeHandler); 
resizeHandler : function(evt) { 

    document.getElementById('someImage').style.width = window.$getView().width/10+'px'; 
    document.getElementById('someImage').style.height = window.$getView().height/10+'px'; 
} 

$ getView 함수는 페이지의 너비와 높이를 가져 오는 크로스 브라우저 함수입니다. resizeHandler에는 원하는 요소의 크기를 조정하는 수학 공식이 있습니다. 여기에서 자신의 페이지 비율을 추가하고 최소 너비와 최대 너비 또는 높이를 설정할 수 있습니다.