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

【问题标题】：How to limit the image width of ngx-image-cropper to its popup container如何将 ngx-image-cropper 的图像宽度限制为其弹出容器
【发布时间】：2020-11-29 09:34:36
【问题描述】：

我有一个弹出窗口，里面有尺寸 (WIDTH,HEIGHT) 和 ngx-image-cropper (https://www.npmjs.com/package/ngx-image-cropper)

<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>

在我的示例中，imageFile 大小为 819 * 202，当我检查 (dimension: width= 749,933; height=184,967) 的 img 标签时它超出了弹出窗口的尺寸（在我的情况下，宽度 = 698）

我希望标签宽度适合弹出窗口的宽度，左侧和右侧的边距为 10px

【问题讨论】：

请在代码中添加一个起点（如 StackBlitz）以显示问题并快速解决您的问题。

标签： angular

【解决方案1】：

对不起，我头晕了，我错误地将一个 div 作为标签图像裁剪器的容器，宽度 = 460 和高度 = 425。我删除了它，现在它可以工作了。

再次抱歉

【讨论】：

你能添加 stackblitz 这个吗？我正面临类似这样的静态尺寸问题