如何获取图片宽高像素并使DOM盒子与其尺寸一致（jQuery移动端适配）

嘿，作为jQuery新手遇到这种响应式布局的同步问题太正常啦，我来一步步给你讲清楚怎么实现👇

一、让.box元素和图片尺寸完全同步 #

首先要注意一个关键点：必须等图片加载完成后再获取尺寸，不然拿到的可能是0或者错误的值。另外移动端窗口大小变化（比如旋转屏幕）时，图片尺寸会跟着变，所以还要监听窗口resize事件来同步更新。

完整代码示例 #

// 把同步逻辑封装成函数，方便重复调用
function syncBoxSizeWithImage() {
  // 选中目标图片和.box元素
  const $targetImg = $('img[src="aa.gif"]');
  const $box = $('.box');

  // 获取图片当前实际渲染的宽高（像素值，不带单位）
  const imgRenderWidth = $targetImg.width();
  const imgRenderHeight = $targetImg.height();

  // 把宽高赋值给.box
  $box.css({
    width: `${imgRenderWidth}px`,
    height: `${imgRenderHeight}px`
  });
}

// 页面所有资源（包括图片）加载完成后，第一次同步尺寸
$(window).on('load', syncBoxSizeWithImage);

// 窗口大小改变时（比如移动端旋转屏幕），重新同步尺寸
$(window).on('resize', syncBoxSizeWithImage);

补充说明 #

如果你的图片是动态添加到页面的（不是一开始就在HTML里），那应该直接给图片绑定load事件，而不是监听window.load：

// 假设动态创建图片的场景
const $newImg = $('<img src="aa.gif">');
$newImg.on('load', function() {
  const imgWidth = $(this).width();
  const imgHeight = $(this).height();
  $('.box').css({ width: imgWidth, height: imgHeight });
});
// 把图片添加到页面
$('body').append($newImg);

二、获取图片的宽高像素值 #

这里分两种情况，根据你的需求选择：

• 获取图片当前渲染的宽高：就是页面上实际显示的尺寸，用$img.width()和$img.height()，返回的是数字类型的像素值（比如300，不是300px）。
• 获取图片原始的宽高：也就是图片文件本身的像素尺寸，不受CSS缩放影响，用$img[0].naturalWidth和$img[0].naturalHeight，同样返回数字类型的像素值。

举个例子：

$(window).on('load', function() {
  const $img = $('img[src="aa.gif"]');
  console.log('渲染宽度：', $img.width());
  console.log('渲染高度：', $img.height());
  console.log('原始宽度：', $img[0].naturalWidth);
  console.log('原始高度：', $img[0].naturalHeight);
});

这样就能完美实现你要的效果啦，有问题随时问哦～

内容的提问来源于stack exchange，提问作者user3061452