Блог

У меня есть bootstrap карточка с изображением внизу. В моем коде также используется AngularJS и ASP.net .

Когда страница становится достаточно маленькой, изображение перемещается из тела карты (перемещается влево).

Я хочу, чтобы изображение оставалось на одном и том же месте независимо от размера экрана.

Пример:

То, что у меня есть и что я хочу сохранить:

Изображение желаемого результата в каждом размере экрана

Что я получил после определенного размера экрана:

Изображение фактического результата

Код: я добавляю, какая часть кода является проблемной, в качестве комментария

     <div class="Title text-info"> {{man.GroupName}} </div>

    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3 mh-100" ng-repeat="m in man.Items">

            <div class="card bg-dark shadow-sm" style="height:250px;">from a file
                <a class="card-body e-bg-cover" style="background-image: url('../../Content/Image/BackGrounds/doc_bg_{{manuals.indexOf(man)%4 1}}B.jpg');">  //Get different images from a file
                    <h4 class="font-weight-bold">{{m.Name}} <span ng-if="m.NewDocument" class="text-warning float-right">@Page.New</span> </h4> //Gets text from a resx file, Yes, it is ASP 

                    <p class="text-white-50">{{m.Description}}</p>


                    // problematic piece of code:
                        <a ng-href="{{m.FileRoute}}">
                            <img src="~/Content/Image/Logos/e_pdf.png" target="_blank" class="e_Manuals_pdf" />
                        </a>
                
                   

                </a>

            </div>
        </div>

    </div>
</div>
 

CSS на всякий случай:

  .e_Manuals_pdf {
        position: absolute;
        top: 170px; 
        right: 280px; 
        z-index: 1;

        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;    }



.e-bg-cover {
  background-size: cover; }




.Title {
  display: inline-block;
  width: 100%;
  font-size: 24px;
  margin: 0 auto 10px auto;
  font-weight: bold;
  padding: 5px 0px;
  border-bottom: #1CA8DD solid 1px; }
  .eniacTitle .eniacBtn {
    font-size: 14px;
    font-weight: normal; }
    .eniacTitle .eniacBtn a {
      height: 50px;
      line-height: 45px; }
    .eniacTitle .eniacBtn i {
      font-size: 30px;
      margin: 0; }
 

 .card {
    position: relative; /*To fix the PDF IMG*/
}

.e_Manuals_pdf {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 1;
    width: 45px;
 
    object-fit: contain; /*To fix the PDF size*/

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
 

Спасибо тебе за Никккшит