在做一个项目的时候遇到显示图片大小与实际图片大小不一致导致的失真问题。
解决方法:在界面新增一个中间img组件,通过这个组件获取图片的实际大小,如果高度、宽度超过规定的高度、宽度则显示规定的高度、宽度。代码如下:
function shows(path, name) {
$("#temp_img").show();
document.getElementById("temp_img").src = path;
var realimg = document.getElementById("temp_img");
var realWidth = realimg.width;
var realHeight = realimg.height;
document.getElementById("carousel_photo_intro").innerText = name;
$("#temp_img").hide();
var showimg;
if (realHeight > 400 && realWidth > 700) {
showimg = "<img src='" + path + "' alt=\"\" style='height:400px;width:700px'/>";
} else if (realHeight > 400) {
showimg = "<img src='" + path + "' alt=\"\" style='height:400px;'/>";
} else if (realWidth > 700) {
showimg = "<img src='" + path + "' alt=\"\" style='width:700px;'/>";
} else {
showimg = "<img src='" + path + "' alt=\"\"/>";
}
$("#carousel_photo_container").html(showimg);
}