javascript - 无法设计像 fb 这样的响应式模态对话框

Question

我已经使用 ember-modal-dialog 插件来使用对话框。我想复制 fb 正在使用的确切模式对话框。但我无法让它工作。我该如何实现这一点。

应用程序.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
  }

模态的.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}}

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