자바스크립트 이미지 비율 유지 / 썸네일 크게 보이기

function doShow(imgSrc){

var bi = document.getElementById("bigimage");

// var bi_width = bi.style.width;

// var bi_height =bi.style.height;

// var maxWidth = bi_width; // Max width for the image

//  var maxHeight = bi_height;    // Max height for the image

var maxWidth = 100; // Max width for the image

var maxHeight = 100;    // Max height for the image

var ratio = 0;  // Used for aspect ratio

    var width = $(this).width();    // Current image width

    var height = $(this).height();  // Current image height

    // Check if the current width is larger than the max

    if(width > maxWidth){

        ratio = maxWidth / width;   // get ratio for scaling image

        $(this).css("width", maxWidth); // Set new width

        $(this).css("height", height * ratio);  // Scale height based on ratio

        height = height * ratio;    // Reset height to match scaled image

        width = width * ratio;    // Reset width to match scaled image

        document.getElementById("bigimage").src = imgSrc;

    }

    // Check if current height is larger than max

    if(height > maxHeight){

        ratio = maxHeight / height; // get ratio for scaling image

        $(this).css("height", maxHeight);   // Set new height

        $(this).css("width", width * ratio);    // Scale width based on ratio

        width = width * ratio;    // Reset width to match scaled image

        

document.getElementById("bigimage").src = imgSrc;

    }

}

<img id="bigimage" src="${plant.bimg_file_name}"  width="100%"  height="auto;"></div>

<img  src="${plantimage.file_name}" width="64px" height="91px" onclick="doShow(this.src)"></a>  

==============>  

작은 이미지를 클릭하면 큰 이미지 대신에 비율에 맞게 넣고자 한다.

지금 큰이미지의 사이즈를 받아와서 작은 이미지가 큰 이미지의 사이즈로 변경이 되긴했지만

문제는 큰 이미지의 실제 사이즈를 받아왔으면 하는 것이지

width="100%"  height="auto;" 라고 그대로 읽어오는 것을 하려던 것이 아니다.

어떻게 해야 할까..

여전히 안된다.

/* var bi =document.getElementById('bigimage');

alert("1----큰이미지 오브젝트 bi"+bi);

var bi_width = bi.width;

var bi_height =bi.height;

alert("2----큰이미지 bi_width : "+bi_width + "    큰이미지 bi_height : "+bi_height);

var maxWidth = bi_width; // Max width for the image

   var maxHeight = bi_height;    // Max height for the image

   alert("3----큰이미지 maxWidth : "+maxWidth + "    큰이미지 maxHeight : "+maxHeight);

   

var ratio = 0;  // Used for aspect ratio

   var width = $(this).width();    // Current image width

   var height = $(this).height();  // Current image height

 

   alert("4---작은 이미지 width : "+width + "작은 이미지  height : "+height);

   

   // Check if the current width is larger than the max

   if(width > maxWidth){

       ratio = maxWidth / width;   // get ratio for scaling image

       

       alert("5----width > maxWidth 인 경우 -> ratio : "+ratio);

        

       

       $(this).css("width", maxWidth); // Set new width

       $(this).css("height", height * ratio);  // Scale height based on ratio

       height = height * ratio;    // Reset height to match scaled image

       width = width * ratio;    // Reset width to match scaled image

       alert("6----작은 이미지 : "+width + "   작은 이미지 : "+height);

       

      document.getElementById("bigimage").src = imgSrc;

  

   }

   // Check if current height is larger than max

   if(height > maxHeight){

       ratio = maxHeight / height; // get ratio for scaling image

     

       alert("7----height > maxHeight 인 경우 -> ratio : "+ratio);

       alert("7-1----height : "+height);

      alert("7-2----maxHeight : "+maxHeight);

       alert("7-3----width : "+width);

       

       

       $(this).css("height", maxHeight);   // Set new height

       $(this).css("width", width * ratio);    // Scale width based on ratio

       width = width * ratio;    // Reset width to match scaled image

       height = height * ratio;    // Reset height to match scaled image

     

       alert("8----작은 이미지 width : "+width + "   작은 이미지 height: "+height);

       

       

 

      document.getElementById("bigimage").src =this;

       

alert ( " 9-----------bi.width " +bi.width +"      bi.height " +bi.height ); 

alert ( " 10-----------this.width " +$(this).width +"*****this.height " +$(this).height ); 

   }

*/

//document.getElementById("bigimage").src = imgSrc;

// ^ 되긴하는데 사이즈가 너무 크다.

이렇게 해주심.

function doShow(imgSrc){

 

obj = $("#bigimage");

$("#bigimage").prop("src",imgSrc); 

//alert(global_width);

//autoImgResize('bigimage',global_width);

var width = 0, height = 0;

maxSize = global_width.replace("px","")-180;    

width = obj.prop("width");

height = obj.prop("height");

obj.attr("width",maxSize+"px");

obj.attr("height",Math.round(height * (maxSize / width))+"px");

//obj.prop("height",Math.round(height * (maxSize / width))+"px"); 

//alert(width+", "+ height+", "+maxSize);    

     

}