此实例解决容器大小固定,而图片大小不固定,使图片完全包含于容器的问题。通过javascript的OriginImage 类获取图片实际大小,然后设置image样式实现。上代码:
include jquery.js;
this.bigPicArea = $("#focusImg");
this.bigImgObj = this.bigPicArea.find("img");
if (this.bigImgObj != null && picarea!=null) {
var OriginImage = new Image();
var url = this.bigImgObj.attr("src");
if (OriginImage.src != url) OriginImage.src = url;
this.ZoomImageByArea({ width: OriginImage.width, height: OriginImage.height }, { width: this.bigPicArea.width(), height: this.bigPicArea.height() }, this.bigImgObj[0]);
}
ZoomImageByArea: function (picwNh, divwNh, picObj) {
var scale = 1;
if ((picwNh.width / divwNh.width) >= (picwNh.height / divwNh.height)) {
scale = picwNh.width / divwNh.width;
$(picObj).attr("width", divwNh.width);
$(picObj).attr("height", picwNh.height / scale);
} else {
scale = picwNh.height / divwNh.height;
$(picObj).attr("width", picwNh.width / scale);
$(picObj).attr("height", divwNh.height);
}
}