js实现判断图片宽度高度不超过容器宽高度,刚好在容器中显示完
实现类似如下图的contain功能
// js实现判断图片宽度高度不超过容器宽高度,刚好在容器中显示完
calcScaleWidthHeigth({
containerWidth, //容器宽度
containerHeight, //容器高度
originWidth, //图片原始宽度
originHeight, //图片原始高度
}) {
// 计算缩放比例,使图片适应容器(保持宽高比)
let scaleFactor = Math.min(
containerWidth / originWidth,
containerHeight / originHeight
);
// 设置图片的宽度和高度以适应容器,同时保持宽高比
return {
width: `${originWidth * scaleFactor}px`,
height: `${originHeight * scaleFactor}px`,
};
},