Comments (5)
Just adding a prop adds a maintenance cost and isn't this simple as we would need to add an extra div.
I prefer not to add it and have this issue serve as an example.
from react-easy-crop.
This can probably be done outside of the library by adding padding to the parent container and moving the "overflow: hidden" one level up.
from react-easy-crop.
This can probably be done outside of the library by adding padding to the parent container and moving the "overflow: hidden" one level up.
Can you share a working example of this? I've been playing with CSS and the HTML structure around the cropper and haven't managed to actually get said padding.
I will note that, if I put an image that is SMALLER than the Cropper component, there will be padding by default, as the Crop Area will fit the dimensions of the image and not the cropper. This is rather inconsistent, and I'd say undesired behaviour.
from react-easy-crop.
I'm not sure if this matches your expectations but here's an example I just created: https://codesandbox.io/p/sandbox/wonderful-elbakyan-pgcfzc?file=%2Fsrc%2Fstyles.css
See the comments in the css file.
from react-easy-crop.
Had to do some slight adjustments to my specific use case, but it did reach the results I was hoping for! I'd still advocate for including it directly in the library as a prop
, as I imagine this should be a "enough" commonly needed feature.
For future reference, here's my code that achieved the desired results, wrapped in Mui elements:
<Box
sx={{
padding: '100px',
overflow: 'hidden',
display: 'flex',
alignItems: 'stretch',
justifyContent: 'stretch',
width: '100%',
height: '100%',
}}
>
<Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
<Cropper { /* CROPPER PROPS */ } />
</Box>
</Box>
I also had to add the css override for the library:
.reactEasyCrop_Container {
overflow: visible !important;
}
from react-easy-crop.
Related Issues (20)
- Feature Request: objectFit: auto-contain, but the other way around HOT 6
- On cropSize change prop doesn't trigged computeSize or updating state of state.cropSize HOT 2
- getCroppedImg returning undefined on IOS HOT 12
- Configure cropper with a fixed crop area size HOT 6
- Crop selections overlap HOT 5
- Image size increases drastically after cropping HOT 2
- Crop Area incorrectly sized for objectFit='cover' HOT 4
- Scrollwheel zoom does not work properly with restrictPosition=false HOT 8
- Question: Cropper 100% width and/or 100% Height HOT 7
- Cannot use import statement outside a module HOT 26
- Cropped image area changes when we zoom in the image , even when cropSize is given HOT 1
- Crop area does not take up the full height/width of the image HOT 6
- Frames are lost on cropping a GIF HOT 3
- There is a bug in setting restrictPosition = true HOT 2
- Triggers unwanted blob request when using local files for cropping HOT 2
- Multiple Crop Areas HOT 1
- Can this library crop images with custom aspects / resizable cropper? HOT 1
- How can i add Any Text and crop the image with Text. HOT 1
- How to make the crop pan to always fit the height and width on the image. HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-easy-crop.