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

user_5063031 0
Viewed 1054

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.

angular
2 Answers

add this to the CSS and it will work

::ng-deep .ngxImageZoomContainer > img{
  max-height: 500px;
}
user_45743130 
    :host {
  ::ng-deep .ngxImageZoomContainer {
    width: 100% !important;
  }

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