image size 100%

[kakulukia]

Id like to have a responsive component and want to set width="100%" but since the croppa component is not accepting % values and the width is hard coded into the elements style tag its kinda hard to overwrite it with CSS rules .. what is the preferred way to set 100% width?

[zhanziyang]

#76 This issue was addressed here and has been solved : )

[kakulukia]

Oh thx - that option wasnt inside the Template Example and since its pretty long i thought it has everything in there.

BUT

i just tested this: with version 1.3.0-1.3.3 it works, but in 1.3.4 the content is broken/not visible when set to auto-resize :(

[zhanziyang]

I will look into that. Thanks!

[mcordoba]

Same problem here... I have been using in the past the jquery plugin called guillotine and it works really well but now Im using vue and croppa would fits my needs if it was responsive keeping aspect ratio

Thank you :)

[zhanziyang]

@kakulukia @mcordoba The problem with auto-sizing in v1.3.4 is fixed in v1.3.6.

[mcordoba]

Thank you for the update but it is not keeping the aspect ratio. If I show it in desktop at 300x200 and then in mobile I have 200px width, the height must be 133px. It is adapting to the available width but the height is fixed to the initial value.

Would be possible to have this feature?

[kakulukia]

Well, this is not a croppa thin in my opinion. When setup correctly this works like it should.
Here is how you could do it:

.headerImage <- this is the croppa wrapper
  width: 100%
  padding-bottom: 30%
  position: relative
  canvas
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0

[Sti3bas]

@mcordoba do you found a solution?