保持比例图像按比例放大或缩小而没有对象适合

Question

我遇到一个问题，我需要根据视口的宽度和高度在div内放大或缩小图像。

我可以使用object-fit: contain;属性来实现自己的目标。

但是使用此属性，当我从javascript获取图像时，DOM中图像的宽度或高度不是真实值。 我需要实际的宽度和高度，因为我需要计算元素在图像内的位置。

这是我到目前为止所做的：

.wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   position: relative;
   max-width: 100%;
   max-height: 100%;
   width: calc(76vw - 60px);
   height: calc(100vh - 100px);
   margin: 30px 0px 30px 30px;
}
.img {
   width: 100%;
   max-height: 100%;
   object-fit: contain;
   height: 100%;
}

这是视觉上的预期结果，而不是预期值。

这是一个小提琴，当您更改窗口宽度时，图像的高度会更改，但其值不会更改。 jsfiddle