Comments (8)
Did you change any CSS to reach this result?
from react-easy-crop.
Did you change any CSS to reach this result?
The way I use this component:
<Cropper
image={props.mediaUrl}
crop={crop}
zoom={zoom}
aspect={1 / 1}
onCropChange={setCrop}
onCropComplete={onCropComplete}
onZoomChange={setZoom}
minZoom={1}
objectFit='horizontal-cover'
style={{
containerStyle: {
position: 'relative',
width: '100%',
height: '100%',
overflow: 'hidden',
borderRadius: '0rem 0rem 1rem 1rem'
},
mediaStyle: {
height: '100%',
width: 'auto',
maxWidth: 'unset'
}
}}
/>
Plus custom CSS:
.reactEasyCrop_CropArea {
width: 100% !important;
height: 100% !important;
}
I think they are all css changes that I made.
from react-easy-crop.
Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.
What are you trying to achieve? Why using these overrides?
from react-easy-crop.
Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.
What are you trying to achieve? Why using these overrides?
Simply put, it is the exact effect at Instagram.
If you open Instagram and try to create a new post, upload an image large enough, you will see it.
I want the image to be displayed taking the full height of the container, which may lead to its width overflowing, and the overflowing parts are hidden, but they can be reached by dragging to the left or right.
Now the bold part above is not achieveable.
I think it should be doable, because the lib knows the container's border and that of the image, so it just needs to calculate the value for translation to make them overlapped.
Now the max limit in my case is translating by 98px, which leads to the narrow strip.
If I change it to 130px-ish in Dev Tool manually, then the effect is correct.
from react-easy-crop.
Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.
What are you trying to achieve? Why using these overrides?
If I zoom in the image (make it bigger), the problem gets worse, and I can reach a even smaller portion of the image.
from react-easy-crop.
Have you tried using the vertical-cover value for objectFit?
from react-easy-crop.
Have you tried using the vertical-cover value for objectFit?
Ah... It is my fault..
It should be vertical-cover
in the first place... because I want the image to take the full height, which is vertically fill the cropper
as the doc says...
I tried the wrong one (horizontal), then used the CSS
mediaStyle: {
height: '100%',
width: 'auto',
...
}
to make it look like it worked, but caused some internal conflicts which lead to the issue.
Sorry about taking your time!
from react-easy-crop.
No worries, I'm here to help 🙂
from react-easy-crop.
Related Issues (20)
- 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
- Black background when cropping image
- 'Cropper' cannot be used as a JSX component. HOT 1
- Update depreciated packages ! HOT 2
- On Safari, images tend to be blurry when zoomed in in the preview HOT 2
- Square image in ios HOT 2
- JSX element class does not support attributes because it does not have a 'props' property. HOT 8
- The scale increases if you do not touch the image when cropping
- Allow lenient dependency on tslib HOT 4
- When using input fields for Crop X and Y values the crop completed is not triggered HOT 1
- Safari object-fit: cover HOT 5
- Allow setting padding for crop area HOT 2
- `style.cropAreaStyle.width` and `height` don't work. They are still certain values when set to be `100%`. HOT 1
- Examples and local implementation crash on ios browser HOT 21
- Croparea is not restored after zoom HOT 1
- Vertical reposition shows blank screen "react-easy-crop": "5.0.7", HOT 1
- InitialCroppedAreaPixels no longer works properly after v5 upgrade HOT 1
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.