Not able to design respponsive modal dialog like fb

Question

I have used ember-modal-dialog addon to use the dialog box.I want to replicate the exact modal dialog what fb is using.But I am not able to get it working.How can I achieve this.

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}}

I am not able to put the whole image inside the container whose size should be variable according to image.Right now I am doing the overflow:hidden.I am trying to implemented how facebook did.But I am not able to fix it.