Javascript 在为图像标记赋予objectfit:contain属性之后，我们如何获得新的图像大小维度？

在上图中，您可以看到原始图像大小和图像在赋予属性“object fit:contain”后收缩

---

在给出“Object fit:contain”属性后，我们可以计算有效的图像大小。

您可以通过JavaScript使用以下几种方法获得元素的尺寸：

总显示面积-测量内容的显示面积以及所有附加功能，如边距、边框等

element.offsetHeight;
element.offsetWidth; 

显示的内容-测量可见的内容（包括填充）

总内容-测量可见和隐藏的总内容（包括填充）

---

加载后的图像对象包含容器的显示尺寸和原始图像的尺寸。因此，计算相当简单：

function getContainedSize(img) {
  var ratio = img.naturalWidth/img.naturalHeight
  var width = img.height*ratio
  var height = img.height
  if (width > img.width) {
    width = img.width
    height = img.width/ratio
  }
  return [width, height]
}

---

[]对不起，我还有其他问题。请检查图像。在应用css

object fit

css将适应最高图像后，所有这些都不会给出渲染的宽度/高度。如果您使用javascript找出最低的，那么objectfit:contain将在最高的两边留下一个间隙（您得到的是相反的行为）。剪辑可能是一种选择。身高：100%也是原因。您能否设置一个完整的工作片段并澄清您的需求/问题。@pratiksolanki如果答案解决了您的问题，请不要忘记接受它：

element.scrollHeight;
element.scrollWidth;

function getContainedSize(img) {
  var ratio = img.naturalWidth/img.naturalHeight
  var width = img.height*ratio
  var height = img.height
  if (width > img.width) {
    width = img.width
    height = img.width/ratio
  }
  return [width, height]
}