比较图片宽高是否超出父元素的宽高,没有超过直接设置图片本身宽高,超过的话,计算比率父元素宽或高比图片的宽或高,乘以图片宽或高
function resizeImage(imgElement, maxWidth, maxHeight) {
let ratio = 0;
let width = imgElement.width();
let height = imgElement.height();
if (width > maxWidth) {
ratio = maxWidth / width;
imgElement.css({
width: maxWidth,
height: ratio * height
if (height > maxHeight) {
ratio = maxHeight / height;
imgElement.css({
width: ratio * width,
height: maxHeight
function resizeImage(imgElement, maxWidth, maxHeight) {
imgElement.on('load', function () {
let ratio = 0;
let width = imgElement.width();
let height = imgElement.height();
if (width > maxWidth) {
ratio = maxWidth / width;
imgElement.css({
width: maxWidth,
height: ratio * height
if (height > maxHeight) {
ratio = maxHeight / height;
imgElement.css({
width: ratio * width,
height: maxHeight
考虑图片缓存以及重新加载:
function resizeImage(imgElement, maxWidth, maxHeight) {
let ratio = 0;
let imgSrc = imgElement.attr('src');
getImageRealSize(imgSrc, function (width, height) {
if (width > maxWidth) {
ratio = maxWidth / width;
imgElement.css({
width: maxWidth,
height: ratio * height
if (height > maxHeight) {
ratio = maxHeight / height;
imgElement.css({
width: ratio * width,
height: maxHeight
function getImageRealSize(imgSrc, callback) {
let img = new Image();
img.src = imgSrc;
//如果图片被缓存则取缓存图片,否则待图片加载完毕在获取
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
优化方案二:
function resizeImage(imgElement, maxWidth, maxHeight) {
let ratio = maxWidth / maxHeight;
let imgSrc = imgElement.attr('src');
getImageRealSize(imgSrc, function (width, height) {
let imgRatio = width / height;
if (ratio > imgRatio) { //显示的宽度较大
imgElement.css({
width: width * (maxHeight / height), //宽度乘以高度比率
height: maxHeight
} else { //显示的高度大
imgElement.css({
width: maxWidth,
height: height * (maxWidth / width)
function getImageRealSize(imgSrc, callback) {
let img = new Image();
img.src = imgSrc;
//如果图片被缓存则取缓存图片,否则待图片加载完毕在获取
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);