Html 在不同宽度的图像上，将Div放置在同一位置

我想在一个类中放置图像。在这个类中，我引入一个映像，在映像中，我打算引入一个div

当图像占据整个类时，div处于良好的位置，但当图像未占据整个宽度时，div移动且不响应：(

有人知道我怎么解决这个问题吗

图像问题

图像未占用宽度…div移出图像

您可以看到使用的代码，并使用不同宽度的图像进行测试

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>

---

您可以使用flex和max width使其具有响应性

  .boxImage {
        flex: 1 1 100%;
        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%;
        max-width: 250px;
      }

---

演示-

它起作用了，但是有没有办法将div放在所有图像的右下角，即使它们具有不同的宽度？如果在html中取消对另一个图像的注释，您可以看到div位于中间。有没有办法始终将其放在同一位置？（右下角）可能你需要使用像boostrap或material css这样的响应性框架。否则你需要编写媒体查询来处理它。你可以检查-。但是用不同的图像宽度处理这个问题有点麻烦。尝试使用相同宽度的图像。stackblitz是否应该显示有问题的情况？当我运行它时，div会这样做“没有移出图像。@ConnorsFan我已经设法解决了这个问题。主要问题是我无法修复所有具有这些不同宽度的图像右下角的div。例如，如果在html中取消注释并使用此图像进行测试，div将转到图像的中心，我希望此div始终位于右下角。”图像

  .boxImage {
        flex: 1 1 100%;
        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%;
        max-width: 250px;
      }