为什么图像在 div 内被翻译？答案

【问题标题】：Why is the image translated inside the div?为什么图像在 div 内被翻译？
【发布时间】：2021-01-24 19:29:57
【问题描述】：

我在 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;
}

这是图像的CSS 和模态div（如果我删除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;
}

【问题讨论】：

标签： css modal-dialog scrollbar center

【解决方案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;
}

【讨论】：