模态/弹出窗口中的图像无法正确缩放

Question

我有一个弹出窗口（模态），可以弹出容器中的图像。我需要将容器和图像缩放到屏幕上（即容器适合用户的屏幕且图像正确嵌套）。附加的样式可以完美工作，直到为我提供更高的分辨率/更大的图像，现在它们从容器的底部脱离了。当我在网站上使用Bootstrap 4时，系统已告知我不要使用内置的BS4模式，因此我有自己的标记。在Codepen中很难模拟，但是在开发站点中，除非在宽屏模式下显示，否则照片似乎可以正确缩放（有关Chrome中“设备工具栏”视图，请参见下面的照片）。我确定有些东西重叠了，但是我无法弄清楚！

这是一个伪码本（库存图片）：https://codepen.io/kaelahc/pen/WNrgVQq

HTML：

    <div class="popupHolder" id="lp2-popup">
  <div class="popupFlex">
    <div class="popup">
      <div class="popupClose">&times;</div>
      <div class="popupCnt">
        <img class="img-fluid" id="lp2-popupImg">
        <br clear="all" />
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row pt-3">
    <div class="col-12 col-md-7 mb-4">
      <div class="imgGridBox">
        <img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Map_of_Japan_with_highlight_on_02edit_Hokkaido_prefecture.svg/800px-Map_of_Japan_with_highlight_on_02edit_Hokkaido_prefecture.svg.png">
        <img id="imgOpen" src="https://cdn.icon-icons.com/icons2/37/PNG/512/online_4158.png">
      </div>
    </div>
    <div class="col-12 col-md-5">
      <div class="row mb-4">
        <div class="col-12">
          <div class="imgGridBox">
            <img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Hakodate_Goryokaku_Panorama_1.JPG/1280px-Hakodate_Goryokaku_Panorama_1.JPG">
            <img id="imgOpen" src="https://cdn.icon-icons.com/icons2/37/PNG/512/online_4158.png">
          </div>
        </div>
      </div>
      <div class="row pt-1">
        <div class="col-6">
          <div class="imgGridBox">
            <img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Nusamai-Bridge.jpg">
            <img id="imgOpen" src="https://cdn.icon-icons.com/icons2/37/PNG/512/online_4158.png">
          </div>
        </div>
        <div class="col-6">
          <div class="imgGridBox">
            <img class="img-fluid myImg" src="https://upload.wikimedia.org/wikipedia/commons/8/80/ObihiroMainSummer.jpg">
            <img id="imgOpen" src="https://cdn.icon-icons.com/icons2/37/PNG/512/online_4158.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS：

.popupHolder{
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    max-width: 100vw;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    z-index: 888888;
}
.popupFlex{ 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.popup{
    position: relative;
    max-height: 90%;
    max-width: 90%;
    background: #fff;
    border-radius: 0.3rem;
}
.popupClose{
    position:absolute;
    right: 0.5rem;
    top: 0.5rem;
    color: #000;
    font-size: 2rem;
    cursor: pointer;
    z-index: 999999;
}
.popupCnt{
    padding: 2rem;
    text-align: center; 
    position: relative;
    height: 100%;
    width: 100%;
    & #lp1-popupImg, #lp2-popupImg {
        height: auto;
        width: 100%;
        object-fit: contain;
        max-width: 900px;
    }
}
.imgGridBox {
    position: relative;
    cursor: pointer;
    & img {
        display: block;
        width: 100%;
    }
}
#imgOpen {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    border: 1px solid #fefefe;
}

JS / JQuery

var modal = document.getElementById('lp2-popup');
var modalImg = document.getElementById('lp2-popupImg');
const opens = document.querySelectorAll(".imgGridBox");

opens.forEach(open => {
open.addEventListener('click', e => {
    e.preventDefault();
    modal.style.visibility = 'visible';
    modalImg.src = open.querySelector('.myImg').src;
    return false;
    });
});

var span = document.getElementsByClassName("popupClose")[0];
span.onclick = function() {
modal.style.visibility = "hidden";
}

$('.popupHolder').click(function(){
modal.style.visibility = "hidden";
})

$('.popupCnt').click(function(event){
event.stopPropagation();
modal.style.visibility = "hidden";
});

例如，以100％：

现在为50％：