Component layout

Component layout

clipper-basic & clipper-fixed both act like canvas/img that has a ratio width/height and can only layout by width.

.clipper {
  width: 100%;
}

However, you cannot set clipper's height

.clipper {
  width: 100%;
  height: 100%;
}

Also, be aware that don't put clipper in a container element the will affect child elements' height (for example some flexboxes will expand children's height).

This is the limitation of the components, the height is affected by the ratio of the image you upload, or ratio, or wrapRatio.

clipper-fixed layout

clipper-fixed's ratio is the same as its ratio prop.

clipper-basic layout

If no wrapRatio is set, clipper-basic's ratio will be the ratio of the image you upload.

If wrapRatio is set, clipper-basic's ratio will be wrapRatio.