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 minimum width/height?

Without ratio

Without ratio, clip box's minimum width/height will be minWidth and minHeight(both are 1 by default).

With ratio

With ratio, minHeight has no effect.

Clip box's minimum width will be minWidth and its height will be calculated by width and ratio.

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

Without ratio

Without ratio, clip box's initial width/height will be initWidth and initHeight(both are 50 by default).

With ratio

With ratio, clipper-basic will depend on clipper's (container) ratio to initialize the size of the clip box.

If ratio < container's ratio: clipper-basic will initial clip box by initHeight, and calculate width by height and ratio.

If ratio > container's ratio: clipper-basic will initial clip box by initWidth, and calculate height by width and ratio.