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.

Notice that the version 1.0.x, ratio will affect clipper's layout.

However since wrapRatio prop was added to control clipper layout, ratio will only affect clip box's ratio after v1.0.0

Invalid settings

Don't let minWidth greater than initWidth or minHeight greater than initHeight, these are invalid settings and will throw errors! Fixed clipper-basic props ratio and wrapRatio behaviors, now ratio will not affect clipper's layout.

How clipper-basic calculate clip box's initial width/height?

With no ratio

With ratio