CSS reset from frameworks breaks wide image cropping

[moeBabazadeh]

Problem Description

When using react-easy-crop with CSS frameworks like Tailwind CSS, Bootstrap, or other frameworks that include CSS resets, wide images don't display correctly during cropping. This happens because these frameworks typically include a global CSS reset rule:

img, video {
  max-width: 100%;
}

This rule conflicts with react-easy-crop's image positioning and causes wide images to be constrained incorrectly within the cropper.

Current Workaround

The current workaround is to manually override the styles:

<Cropper
  image={src}
  crop={crop}
  zoom={zoom}
  aspect={aspect}
  onCropChange={setCrop}
  onZoomChange={setZoom}
  style={{ mediaStyle: { maxWidth: "unset" } }}
/>

Proposed Solution

Add max-width: unset to the existing CSS rules to prevent global CSS resets from interfering with the cropper's functionality. This should be added to either:

1. .reactEasyCrop_Image, .reactEasyCrop_Video selectors, or
2. .reactEasyCrop_Cover_Vertical selector

Affected Frameworks

This issue affects projects using:

• Tailwind CSS
• Bootstrap
• Normalize.css
• Any CSS framework with img { max-width: 100% } reset

Environment

• react-easy-crop version: [Latest version]
• Framework: Next.js with Tailwind CSS
• Browser: All browsers

Screenshots

Current behaviour:

Expected behaviour:

Additional Context

This is a common issue that many developers encounter when integrating react-easy-crop with modern CSS frameworks. Adding this fix directly to the library would improve the out-of-the-box experience and eliminate the need for manual style overrides.

I can make a PR for this if it's OK with you.

[ValentinH]

Thank you for the detailed issue. Yes, a PR is welcome.