Position Div in the same location on images with different widths

There is a class where I want to place images. Within this class I introduce an image and within the image I intend to introduce a div.

When the image occupies the whole class, the div is well positioned, but when the image does not occupy the full width, the div shifts and does not behave responsively :(

Does anyone know how I can solve this?

Image Problem

Image not occupying width ... div shifts out of image.

My code ---> Stackblitz

You can see the code used and test with different width image.

HTML

<div class="drop">
          <div class="abc">
            <!-- <img class="img-fluid Images" src="https://i.ibb.co/mqnwwKB/Screenshot-72.jpg"> -->
            <img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg">
        <div class="row boxImage">
            <div class="row divBtn">
                <a class="toggle-one">
                    <span class="nav-link btnZ"></span>
                  </a>
                <a class="toggle-two">
                  <span class="nav-link btnT"></span>
                </a>
                <a class="toggle-three">
                  <span class="nav-link btnR"></span>
                </a>
                <a class="toggle-four">
                  <span class="nav-link btnP"></span>
                </a>
             </div>
          <ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block">
            <li (click)="countStar(star)" [ngClass]="{'selected': (star <= selectedValue)}">
              <i class="fa fa-star"></i>
            </li>
          </ul>
        </div>
          </div>
        </div>

CSS

.drop {
    margin-left: 25px;
    width: 90%;
  height: 696px;
    /* border: 3px dashed #DADFE3; */
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    background: white;
    /* margin: auto; */
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

      .boxImage{
        cursor: pointer;
        position: absolute;
        background-color: white;
        background-position: 13px 13px;
        background-repeat: no-repeat;
        height: 50px;
        width: 44%;
        border-radius: 8px;
        opacity: 1;
        top: 91%;
        left: 43%;
      }

   .abc {
   /* width: 100% !important; */
    height: 100%;
}



.abc img {
    height: 100%;
    max-width: 100%;
}