alt="Profile crop preview"
width={500}
height={500}
className="object-contain rounded-xl w-fit top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 absolute select-none p-1 border border-border "
sizes="180px"
onLoad={()=>{
setImageTrueHeight(getContainedSize(pfpPreviewImageRef.current!)[1]!);
setImageTrueWidth(getContainedSize(pfpPreviewImageRef.current!)[0]!);
}}
style={{
maxHeight: "100%",
position: "absolute",
}}
ref={pfpPreviewImageRef}
onMouseDown={handleCropPreviewDrag}
onDragStart={e => e.preventDefault()}
>
ref={cropIndicatorRef}
className="crop-inducator absolute cursor-move -translate-x-1/2 -translate-y-1/2 bg-white/20 top-1/2 left-1/2 size-[200px] rounded-full outline outline-black border-2 border-white pointer-events-none"
style={{ width: cropInducatorSize, height: cropInducatorSize }}
/>
Существует также слайдер Zoom, и он влияет на изображение путем настройки стиля.>
Подробнее здесь: https://stackoverflow.com/questions/796 ... -rectangle
