想知道网页上所有图片的显示尺寸，用浏览器审查元素一个一个看，显然不方便，但可以通过代码直接把尺寸标注在图片上面。

以Chrome浏览器为例，按F12键打开开发者工具，打开控制台（Console），输入下面的代码：

document.querySelectorAll('img').forEach(img => {
	const imgW = img.offsetWidth, imgH = img.offsetHeight;
	const imgDiv = document.createElement('div');
	imgDiv.textContent = `${imgW} x ${imgH}`;
	imgDiv.style.cssText = 'position:absolute;background:rgba(255,255,0,0.8);color:#000;font-size:12px;padding:2px 5px;z-index:9999;';
	img.parentNode.style.position = 'relative';
	img.parentNode.appendChild(imgDiv);
	imgDiv.style.top = '10%'; imgDiv.style.left = '10%';
});

然后按回车键运行，网页上的img标签图片就会标注图片的显示尺寸。

如果要显示图片的原始实际尺寸，就把offsetWidth、offsetHeight改成naturalWidth、naturalHeight，如下：

document.querySelectorAll('img').forEach(img => {
	const imgW = img.naturalWidth, imgH = img.naturalHeight; // 图片实际尺寸
	const imgDiv = document.createElement('div');
	imgDiv.textContent = `${imgW} x ${imgH}`;
	imgDiv.style.cssText = 'position:absolute;background:rgba(255,255,0,0.8);color:#000;font-size:12px;padding:2px 5px;z-index:9999;';
	img.parentNode.style.position = 'relative';
	img.parentNode.appendChild(imgDiv);
	imgDiv.style.top = '10%'; imgDiv.style.left = '10%';
});

如果想要把标注了尺寸的网页截图下来，就在Chrome浏览器中使用快捷键Ctrl+Shift+P，输入指令“Capture full size screenshot”（捕获全尺寸屏幕截图）：

浏览器就会自动下载已经标注了图片尺寸的整页截图。

提示：如果是自己的项目，可以把代码放在自己的js文件里，就不用每次刷新都要输入运行。