이미지 적응 크기 조정 문제 + 자바 스크립트

Question

모두에게 안녕하세요 !!

이미지 크기 조정에 문제가 발생했습니다. & 자바 스크립트.

가로 세로 비율을 유지하면서 이미지 크기를 조정하는 함수를 작성했습니다. 그것은 그리 작지 않은 이미지 (즉 크기> 1MB의) 처리하는 경우를 제외하고 정말 잘 작동

<div id="div_image" style="display: block;"> 
    <img src="" alt="0" id="image" onLoad="computeRatio()"/> 
</div> 

:

function computeRatio() { 

     var el_image = document.getElementById("div_image"); 

     var newImg = new Image();   
     newImg.src = document.getElementById("image").src; 

// GET IMAGE REAL DIMENSIONS 

     var image_height = newImg.height; 
     var image_width = newImg.width; 

// SET WINDOW DIMENSIONS 

     var window_height = 762; 
     var window_width = 600; 

// COMPUTE DIMENSION RATIOS 

     var height_ratio = image_height/window_height; 
     var width_ratio = image_width/window_width; 

// RESET IMAGE POSITION 

     el_image.style.left = "0px"; 
     el_image.style.top = "0px"; 

     if (height_ratio > width_ratio) { 
      var width = window_height/(image_height/image_width); 

// SET NEW DIMENSIONS (MAX HEIGHT & NEW WIDTH) 

      el_image.style.width = width+"px"; 
      el_image.style.height = window_height+"px" 

// SET NEW POSITION TO CENTER IMAGE 

      var scroll_x = (window_width-width)/2; 

      el_image.style.left = scroll_x+"px"; 

     } else { 
      var height = window_width*(image_height/image_width); 


// SET NEW DIMENSIONS (MAX WIDTH & NEW HEIGHT) 

      el_image.style.width = window_width+"px" 
      el_image.style.height = height+"px"; 

      var scroll_y = (window_height-height)/2; 

      el_image.style.top = scroll_y+"px"; 
     } 

} 

이 HTML의 관련 부분은 다음과 같습니다 여기 기능입니다.

이 함수는 함수가 올바른 크기를 계산하지만 이미지가 전체 화면 (W = 600px, H = 762px)으로 표시되고 분명히 가운데 맞춤이 아닙니다.

나는 이것이 왜 일어나는 지 정말로 이해할 수 없다 !!

어떤 도움이 필요합니까? 모든

Answer 1

에

덕분에, 용기의 이미지 종횡비를 유지 막 display:block에 이미지를 설정하고 width:100%을 추가한다. 효과는 이미지가 포함 된 요소의 너비에 채우고 높이가 자동으로 조정된다는 것입니다.

#image { 
    display:block; 
    width:100%; 
}