search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
931 stars 130 forks source link

How to achieve always square cropper #176

Closed rafalolszewski94 closed 2 years ago

rafalolszewski94 commented 2 years ago

What I'm trying and failing to achieve is a cropper that's always square to put it as simple as possible.

Explaining more, via examples; if you have horizontal image, I would like to add empty white space which can be also in the area of the cropped image to make the image square

Current behaviour: image

As you can see, it's completely horizontal. What I want is to take dynamically highest number of width or height of the image and make the other value the same (so it's square always)

What I (kind of) want to achieve: image

Gray area should be also available to the cropper (it is just height CSS class on the cropper)

Norserium commented 2 years ago

@rafalolszewski94, if I understood you correctly, I see a plenty of different ways to do what you need.

For example, I can offer you the CSS-only solution supported by the most browsers. You can make it even simpler by using of aspect-ratio property if you may use it.

Notice, you can select the area around of the image, but try to resize image. It's perfectly normal behavior, but I should warn you about it.

Norserium commented 2 years ago

@rafalolszewski94, any news?

Norserium commented 2 years ago

@rafalolszewski94, any news?

rafalolszewski94 commented 2 years ago

@rafalolszewski94, any news?

Sorry for late reply, everything works with 'absolute' way. Didn't really understand how aspect ratio could work here or what the layout should look like with it.

Norserium commented 2 years ago

@rafalolszewski94, first of all, the solution is not specific for the cropper. The cropper just fills the available place. The trick is the available place preserves the aspect ratio.

To make that you can use aspect-ratio property or the old trick. I used the last one. You can find its explanation in this nice answer, also you can find the other solutions below.

Norserium commented 2 years ago

@rafalolszewski94, is your issue solved?

Norserium commented 2 years ago

@rafalolszewski94, any news?

rafalolszewski94 commented 2 years ago

@rafalolszewski94, any news?

Resolved with your CSS solution plus I changed some settings afterwards anyway.

As a recommendation I would promote most the twitter example, because I believe it's closest to most used world-wide cropper behaviour.

Norserium commented 2 years ago

@rafalolszewski94,I will rewrite the documentation in the future to make it similar to react-advanced-cropper. So an user will be able to see the most popular cropper solutions on the main page. The link to the source code is available in the info section.