ngx-image-zoom set max-width and -height

Question

ngx-image-zoom is a great product. After some testing we found out it will be necessary to set a max-width so a large image won't bump other content off the cliff.

No matter what we do like the followings and/or combination won't do the tricks to contain and auto-resize it

• <lib-ngx-image-zoom style="max-width:100px" ...>
• <div style="width:100px; max-width:100px">

F12 shows it has this setting

<div _ngcontent-tnl-c230="" class="ngxImageZoomContainer" style="width: 773px; height: 768px;">

manually decreased the width and height just like cut out and show the corresponding area from upper left corner.

Answer 1

add this to the CSS and it will work

::ng-deep .ngxImageZoomContainer > img{
  max-height: 500px;
}

Answer 2

    :host {
  ::ng-deep .ngxImageZoomContainer {
    width: 100% !important;
  }

  ::ng-deep .ngxImageZoomThumbnail {
    width: 100% !important;
  }
}