Component layout in depth

Component layout in depth (clipper-basic)

clipper-basic has six props about layout setting that you should be careful using them: ratio, wrapRatio, minWidth, minHeight, initWidth and initHeight.

• ratio: ratio(width/height) of the clip box.
• wrapRatio: ratio(width/height) of the clipper(container).
• minWidth: minimum width of clip box related to clipper's width(%).
• minHeight: minimum height of clip box related to clipper's height(%).
• initWidth: initial width of clip box related to clipper's width(%) when the image loaded.
• initHeight: initial height of clip box related to clipper's height (%) when the image loaded.

Invalid settings

Don't let minWidth greater than initWidth or minHeight greater than initHeight, these are invalid settings and will throw errors!

No ratio

Let's start with the default behavior. When no ratio is set, the clipper will be the same ratio as the image and the initial width/height of the clip box will be initWidth and initHeight(both are the default 50).

Clip box's minimum width/height will affect by minWidth and minHeight.

With ratio

//...