2010-05-11 5 views
4

일부 축소판이 있는데 클릭하면 더 큰 이미지에서 50 % w/h로 축척 할 DIV가있는 모달 상자가 나타납니다./H는 속성 난 그냥 # foo는-IMG w 설정할 수없는 것jQuery로로드가 완료된 후 div의 축척 이미지

#foo-img { width: 100%; height: 100%; } 
#foo-div { 
    width: 400px; height: 265px; 
    padding: 10px; background: black; 
} 

<div id="foo-div"> 
    <img id="foo-img" src="img/003.jpg" /> 
</div> 

:
나는 스케일링에 대한 다음과 같은 방법 800x530px의 이미지에 대한 유효하고 크로스 브라우저 있는지 알고 싶습니다 새 이미지를로드 할 때마다 크기가 50 % 작아집니다! 다음

 var rnd = Math.floor(Math.random() * 101) 

     $("a.loadimg").click(function() { 
      // resets the DIV 
      imgLoadReset(); 
      var imgPath = "images/" + $(this).text() + "?" + rnd; 
      imgLoad(imgPath); 
      return false; 
     }); 

     function imgLoad(imgPath) { 
      $("#foo-img").hide() 
      .one('load', function() { 
       imgLoadComplete(); 
      }) 
      .attr("src", imgPath) 
      .each(function() { 
       if(this.complete) $(this).trigger('load'); 
      }); 
     }   

     function imgLoadComplete() { 
      // after the image is completely loaded, we can get the w/h of the image 
      var imgW = $("#foo-img").width()/2; 
      var imgH = $("#foo-img").height()/2; 

      // set div to half image size   
      $("#foo-div").css({ "width": imgW, "height": imgH }); 
      // this should scale the image inside the div 
      $("#foo-img").css({ "width": "100%", "height": "100%" }); 

      $("#foo-img").show(); 
     } 

     function imgLoadReset() { 
      // delete w/h attributes otherwise it doesn't work 
      $("#foo-img").css({ "width": "", "height": "" }); 
      // clear image with a blank 
      $("#foo-img").attr("src", "about:blank"); 
     } 

HTML

<div id="foo-div"> 
    <img id="foo-img" src="about:blank" /> 
</div> 
<hr> 
<a class="loadimg" href="#">001.jpg</a> | 
<a class="loadimg" href="#">002.jpg</a> | 
<a class="loadimg" href="#">003.jpg</a> | 
<a class="loadimg" href="#">004.jpg</a> 

답변

1

.. 사용

이미지에 대한
img { 
    max-width: 100%; 
    width: auto; 
    height: auto; 
} 

작동하는 일이지만, 그것은 나에게 코드를 엄청 많이 보인다; 컨테이너 div의 원하는 너비 (픽셀 단위)를 지정합니다.

관련 문제