本文介绍了一种使用JavaScript实现的图片自适应加载方法，确保图片能在不同尺寸的屏幕上正确显示而不失真。该方法通过获取图片原始尺寸，判断是否需要调整宽度或高度，并保持图片的纵横比不变，避免拉伸或压缩现象。适用于网页开发中图片展示的需求。
<script type="text/javascript">
function setStyle(elem,prop,value) {
elem.style[prop] = value ;
}
function imageLoad() {
this.style.visibility = 'hidden';
this.style.display = 'block';
var width = this.clientWidth;
var height = this.clientHeight;
this.style.display = 'none';
this.style.visibility = 'visible';
if(width > 180 || height > 120) {
if(width > 180 && height > 120) {
var min = Math.min(width,height);
if(min == width) {
setStyle(this,'width' , '180px');
setStyle(this,'height',Math.floor(height * 180 / width) + 'px');
} else {
setStyle(this,'width' , Math.floor(width * 120 / height) + 'px');
setStyle(this,'height','120px');
}
} else {
if(width > 180) {
setStyle(this,'width' , '180px');
setStyle(this,'height',Math.floor(height * 180 / width) + 'px');
} else {
setStyle(this,'width' , Math.floor(width * 120 / height) + 'px');
setStyle(this,'height','120px');
}
}
}
this.style.display = 'block';
this.onload = null;
}
</script>
图片缩放，兼容页面读取
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
