如何将 ngx-image-cropper 的图像宽度限制为其弹出容器

Question

I have a popup with dimension (WIDTH,HEIGHT) and ngx-image-cropper ( https://www.npmjs.com/package/ngx-image-cropper ) inside

<div mat-dialog-container>

    <image-cropper
        [imageBase64]="imageFile"
        [maintainAspectRatio]="true"
        [aspectRatio]="aspectRatio"    
        [cropperStaticWidth]="cropperStaticWidth"
        [cropperStaticHeight]="cropperStaticHeight"
        [hideResizeSquares]="true"
        format="png"
        (imageCropped)="imageCropped($event)"
        (imageLoaded)="imageLoaded()"
        (cropperReady)="cropperReady()"
        (loadImageFailed)="loadImageFailed()"
    ></image-cropper> 
</div>

in my example, the imageFile size is 819 * 202 and when I inspect the img tag of (dimension: width= 749,933; height=184,967) it exceeds the dimension of the popup (in my case, width = 698)

I want the tag width of fit the width of the popup with a margin of 10px on left side as well as right side

Answer 1

Sorry, I am dizzy, I put by mistake a div as container of tag image-cropper with width = 460 and height = 425. I removed it and now it is working.

Sorry again