To fit an image to a screen we need to calculate the dimentions first. On browsers it’s easy to do, because they calculate in internally, but on when we move to native side, then we have to calculate the size. The following code will help you to achieve that.
const transformImageSizeToContain = (
boardToFitInto: {
width: number;
height: number;
}, // screen size to fit into.
boardTofit: {width: number; height: number}, // image to fit.
strech?: boolean, // should stretch if image size is less than screen.
) => {
const renderedImageDimentions = {width: 0, height: 0};
const boardAndImageOrgWidthRatio = boardToFitInto.width / boardTofit.width;
const boardAndImageOrgHeightRatio = boardToFitInto.height / boardTofit.height;
if (
boardTofit.width > boardToFitInto.width ||
boardTofit.height > boardToFitInto.height
) {
// image rescaled.
if (boardAndImageOrgWidthRatio < boardAndImageOrgHeightRatio) {
// width will be equal to board width
renderedImageDimentions.width = boardToFitInto.width;
renderedImageDimentions.height =
boardTofit.height * (boardToFitInto.width / boardTofit.width);
} else if (boardAndImageOrgWidthRatio > boardAndImageOrgHeightRatio) {
// height will be equal to board height
renderedImageDimentions.width =
boardTofit.width * (boardToFitInto.height / boardTofit.height);
renderedImageDimentions.height = boardToFitInto.height;
} else {
renderedImageDimentions.width = boardToFitInto.width;
renderedImageDimentions.height = boardToFitInto.height;
}
} else {
if (strech) {
// Scale image to fit in the board.
const ratio = Math.min(
boardAndImageOrgWidthRatio,
boardAndImageOrgHeightRatio,
);
renderedImageDimentions.width = boardTofit.width * ratio;
renderedImageDimentions.height = boardTofit.height * ratio;
} else {
// Image not scaled and redendered as it is.
renderedImageDimentions.width = boardTofit.width;
renderedImageDimentions.height = boardTofit.height;
}
}
return renderedImageDimentions;
};
Cheers and Peace out!!!