Выровняйте изображение по правому краю с максимальной шириной и максимальной высотой - PullRequest
0 голосов
/ 17 сентября 2018

Как правильно выровнять изображение, для которого заданы максимальная ширина и максимальная высота? Пожалуйста, смотрите стили ниже. Высота и ширина задаются динамически. Когда ширина отрегулирована, изображение перемещается влево. Как предотвратить это и сохранить изображение на правом краю, когда ширина изменяется?

    <div class="img-label-wrapper">
      <img src="../assets/portal/css/x-logo.png" class="titleResource" width="60px" height="20px">                    
    </div>

    .img-label-wrapper {
       position: relative;
       top: -5px;
       text-align: right;
       width: 100%;
    }    
    .img-label-wrapper .titleResource {
       max-width: 100px !important;
       max-height: 20px !important;
       float: right;
       margin-top: unset !important;
    }

1 Ответ

0 голосов
/ 17 сентября 2018

Просто используйте flex и margin-left: auto, чтобы выровнять изображение по правому краю, и не указывайте размеры img в теге img.

.img-label-wrapper {
  display: flex;
}

.titleResource {
    max-width: 100px;
    max-height: 20px;
    margin-left: auto;
}
<div class="img-label-wrapper">
  <img class="titleResource" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">                   
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...