1

How do I right align an image which has max-width and max-height given? Please see the styles below. The height and width are dynamically set. When the width is adjusted , the image moves to left side. How to prevent this and keep the image on the right edge while the width gets changed?

    <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;
    }
Sh_88
  • 21
  • 1
  • 6

1 Answers1

2

Just use flex and margin-left: auto to align the image right, and do not specify the img dimensions in the img tag.

.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>
gazdagergo
  • 6,187
  • 1
  • 31
  • 45
  • The OP already said that the width of `image-label-wrapper` should be such that it can be adjusted. You just deleted the `width` tag from `image-label-wrapper`. – sequel Sep 17 '18 at 08:53
  • 1
    Thanks for the solution. Unfortunately, this does not solve the issue since the width is dynamic and with different widths, the icon gets moved to the left side. – Sh_88 Sep 17 '18 at 11:12
  • Can you provide some wireframe drawings which present the desired behavior? – gazdagergo Sep 17 '18 at 12:17