Estoy usando CropperJS a través del paquete react-cropper. Funciona muy bien, pero no puedo descifrar cómo diseñar la interfaz de usuario del recortador. Todo lo que quiero hacer es restringir el alto/ancho para que la parte recortada forme solo una parte de un cuadro de diálogo, pero siempre se escala dependiendo de la imagen. que se carga, por lo que una imagen alta y delgada haría que la interfaz de usuario fuera mucho más alta que una pequeña y ancha.

 <Cropper autoCropArea={0.9} data={initialDetails.cropperData ?? undefined} viewMode={3} src={originalImageUrl ?? undefined} onInitialized={(cropper) => { cropperInstanceRef.current = cropper; }} zoomable={false} guides />

Lo que he probado:

• Todo tipo de CSS: parece verse frustrado por el recorte que establece algunas alturas y anchos como estilos en línea
• Cada opción en los documentos para CropperJS que parecía que podría ayudar.

Si es relevante, no hay una imagen cargada al principio, el usuario la carga utilizando una entrada de archivo. Me gustaría tener (por el bien del argumento) 400 px por 400 px reservados para el recortador, ya sea que no haya una imagen o una imagen de cualquier dimensión cargada.