Javascript 无法像fb一样设计响应模式对话框

我使用了ember modal dialog插件来使用对话框。我想复制fb使用的确切模态对话框。但我无法使其工作。我如何才能实现这一点

app.scss

.image-overlay-container .card {
    width: auto;
    height: auto;
    max-height:600px;
    max-width:960px;
    background-color: #343031;
    display: inline-block;
    margin-left: auto;

      }


  .image-overlay-container  .scale {
        overflow:hidden;
        display:inline-block;
        width: auto;
        height: auto;
        max-height:600px;
        max-width:600px;
        background-color: white;

       }
.image-overlay-container .transhifive{
        text-align:left;
        height: 40px;
        width:600px;
        background-color:#000000;
        opacity: 0.9;
        z-index: 124;
        position: absolute;
        margin-top:-39px;
        margin-bottom: 0px;
        display: none;
      }

    .image-overlay-container .scale:hover .transhifive{
      display: block;
     }

image-overlay-container  .scale img {
      width:100%;
      height:100%;
      z-index: 123;
      object-fit:contain
  }

modal.hbs

{{#modal-dialog translucentOverlay=true
                  close = (action "closeimgOverlay0" photo)  
                  targetAttachment='none'
                  container-class='image-overlay-container'
                  overlay-class='centered-scrolling-overlay'
                  wrapper-class='centered-scrolling-wrapper'}}
                  <div class="card">
                    <div class="scale">
                      <img src = "{{photo_url}}"/>
                    </div>
                    <div class="transhifive">
                   </div>   
              {{/modal-dialog}}

{{#模式对话框半透明覆盖=true
关闭=（操作“closeimgOverlay0”照片）
targetAttachment='none'
容器class='image-overlay-container'
覆盖class='centered-scrolling-overlay'
包装器class='centered-scrolling-wrapper'}
{{/modal dialog}}

---

我无法将整个图像放入容器中，容器的大小应根据图像而变化。现在我正在执行溢出：隐藏。我正在尝试实现facebook的方式。但我无法修复它

屏幕截图可能会帮助您解决css问题，还是对话框根本不工作？这是你的起点吗？