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>