为什么图片会在div中被翻译？

Question

我在一个DIV modal里面有一个图像img，在右下角有一个按钮+。此按钮调用函数imgfit()，该函数可将图像视图切换为“窗口内适配和居中”或"100%“(即1:1像素)。它可以工作，除了滚动条不允许我滚动图像的顶部/左侧:当图像以1:1的比例显示时，图像在div中以负向移动。

如何告诉滚动条它们“忘记”了图像顶部/右侧的部分？您可以查看问题here (将浏览器窗口设置得相对较小，以便更好地查看问题)。

该按钮调用以下函数imgfit

function imgfit()
{
  if (fit) {
    img.style.minWidth = "0px";
    img.style.minHeight = "0px";
    img.style.maxWidth = "100vw";
    img.style.maxHeight = "100vh";
    modal.style.overflow = "hidden"; // Prevent scroll of fullsize image
  } else {
    img.style.maxWidth = 'none';
    img.style.maxHeight = 'none';
    img.style.minWidth = img.naturalWidth+"px";
    img.style.minHeight = img.naturalHeight+"px";
    modal.style.overflow = "auto"; // Allow scroll of fullsize image
  }
  fit = ! fit;
}

这是图像和模式div的CSS (如果我删除align-items: center和justify-content: center，问题就消失了，但图像没有居中)：

.modal {
 align-items: center;
 justify-content: center;
 position: fixed;
 z-index: 100;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-color: #000;
 -moz-user-select: none;
 user-select: none;
 touch-action: manipulation;
}

.img {
 cursor: no-drop;
 position: absolute;
 margin: auto;
 touch-action: manipulation;
}

Answer 1

多亏了整洁的文章here (我不知道那个sitepoint.com站点)，我解决了这个问题。罪魁祸首是position: absolute的事情。改用display: grid解决了这个问题：

.modal {
 display: grid;
 align-items: center;
 position: fixed;
 z-index: 100;
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%; 
 overflow: hidden;
 background-color: #000; 
 -moz-user-select: none;
 user-select: none;
 touch-action: manipulation;
}

.img {
 grid-column: 1;
 grid-row: 1;
 cursor: no-drop;
 margin: auto;
 touch-action: manipulation;
}