使用对象匹配获取 <img> 标记内的图像大小 [重复]

Question

如何获取已在浏览器上呈现的图像的大小，在带有object-fit: contain 属性的<img /> 标记内？

如您所见，img 标签适合 100% 的容器，但里面的图像不适合。我需要图像的大小，而不是标签

naturalWidth clientWidth 和 width 没有返回想要的值

Answer 1

你可以使用offsetWidth获取任意元素的width

function func() {
  var imgTag = document.getElementById("imgTag")
  var demo = document.getElementById("demo")
  
  demo.innerHTML = imgTag.offsetWidth

}

<img src="https://pixy.org/src/477/4774988.jpg" width="200" height="200" id="imgTag" />
<button onclick="func()">Get width</button>
<div id="demo"></div>

Answer 2

You can usewindow.getComputedStyle()

let para = document.querySelector('p');

let imgWithNoStyle = document.getElementById('noStyle');
let imgWithStyle = document.getElementById('withStyle');

let imgWithNoStyles = window.getComputedStyle(imgWithNoStyle);
let imgWithStyles = window.getComputedStyle(imgWithStyle);

para.textContent = `
  My computed img with no style is: 
  ${imgWithNoStyles.objectFit} 
  ${imgWithNoStyles.width} 
  ${imgWithNoStyles.height}
  and my computed img with style is: 
  ${imgWithStyles.objectFit} 
  ${imgWithStyles.width} 
  ${imgWithStyles.height}
`;

.with-style {
  width: 200px;
  height: 300px;
  border: 5px solid black;
  object-fit: fill;
}

<p>Hello</p>

<img src="https://www.w3schools.com/tags/img_girl.jpg" id="noStyle">

<img src="https://www.w3schools.com/tags/img_girl.jpg" id="withStyle" class="with-style">

Answer 3

document.querySelector("img").naturalWidth;