当前位置:
网页上图片封面自适应图片容器不变形 图片自适应
机器助手 | 2025-07-13
101人浏览
function imgAutoSize(options){
//默认参数
var defaults = {
selector: '' //图片选择器
,width: '500' //图片容器宽度像素
,height: '400'//图片容器高度像素
}
//参数合并
var config = $.extend({},defaults, options);
var img = $(config.selector);
img.each(function(index, el) {
var b = config.width/config.height;
var image = new Image();
//原图片原始地址(用于获取原图片的真实宽高,当标签指定了宽、高时不受影响)
image.src = el.src;
// 当图片比图片框小时不做任何改变
if (image.width/image.height < b) {
$(el).width('100%');
}
else
{
$(el).height('100%');
}
});
return false;
};
1.每一张图片都有一个固定宽高的容器
2.图片加上一个选选择器
3.图片会根据自身的宽高计算,是宽度100%还是高度100%; 超出部分隐藏
4.调用方法看方法体注释
