이미지 비율 유지

이미지 클릭하면 크게 보이기

썸네일 클릭하면 크게 보이기

이미지클릭하면 다른 곳에 보이기

이미지 비율 유지

function doShow(imgSrc){

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

}

function ImgChk(obj)

{

  FixX=200;

  FixY=200;

  temp = new Image();

  temp.src = obj.src;

  if((temp.width-FixX)<(temp.height-FixY))

  {

    if(temp.height>FixY)

    {

        obj.height=FixY;

        obj.over=1

    }

  }

  else

  {

    if(temp.width>FixX)

    {

      obj.width=FixX;

      obj.over=1

    }

  }

  obj.style.display = ""

}

---

 <div><img id="bigimage" src="${plant.bimg_file_name}" onLoad="ImgChk(this)"></div>

function imgsizekeep(){

var divs = document.querySelectorAll('li > div');

 for (var i = 0; i < divs.length; ++i) {

   var div = divs[i];

   var divAspect = div.offsetHeight / div.offsetWidth;

   div.style.overflow = 'hidden';

   var img = div.querySelector('img');

   var imgAspect = img.height / img.width;

   if (imgAspect <= divAspect) {

     // 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다

     var imgWidthActual = div.offsetHeight / imgAspect;

     var imgWidthToBe = div.offsetHeight / divAspect;

     var marginLeft = -Math.round((imgWidthActual - imgWidthToBe) / 2)

     img.style.cssText = 'width: auto; height: 100%; margin-left: '

                     + marginLeft + 'px;'

   } else {

     // 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다

     img.style.cssText = 'width: 100%; height: auto; margin-left: 0;';

   }

 }

};