refactor: 单独封装出一个 adjustCover 方法

packages-user/client-modules/src/render/ui/title.tsx

@@ -26,6 +26,7 @@ import { ExitFullscreen, Fullscreen, SoundVolume } from '../components';
 import { mainSetting, triggerFullscreen } from '@motajs/legacy-ui';
 import { saveLoad } from './save';
 import { MainSceneUI } from './main';
+import { adjustCover } from '../utils';
 
 const enum TitleButton {
     StartGame,
@@ -59,19 +60,12 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
     const bg = core.material.images.images['bg.webp'];
 
     //#region 计算背景图
-    const aspect = bg.width / bg.height;
-    const canvasAspect = MAIN_WIDTH / MAIN_HEIGHT;
-    const [width, height] = (() => {
-        if (canvasAspect > aspect) {
-            const width = MAIN_WIDTH;
-            const height = width / aspect;
-            return [width, height];
-        } else {
-            const height = MAIN_HEIGHT;
-            const width = height * aspect;
-            return [width, height];
-        }
-    })();
+    const [width, height] = adjustCover(
+        bg.width,
+        bg.height,
+        MAIN_WIDTH,
+        MAIN_HEIGHT
+    );
 
     //#region 标题设置
 

packages-user/client-modules/src/render/utils/layout.ts

@@ -57,3 +57,30 @@ export function adjustGrid(
         locs
     };
 }
+
+/**
+ * 适配为覆盖模式，类似于 `object-fit: cover`
+ * @param itemWidth 元素宽度
+ * @param itemHeight 元素高度
+ * @param targetWidth 目标宽度
+ * @param targetHeight 目标高度
+ * @returns 适配为覆盖模式后元素的宽高
+ */
+export function adjustCover(
+    itemWidth: number,
+    itemHeight: number,
+    targetWidth: number,
+    targetHeight: number
+): Readonly<LocArr> {
+    const aspect = itemWidth / itemHeight;
+    const canvasAspect = targetWidth / targetHeight;
+    if (canvasAspect > aspect) {
+        const width = targetWidth;
+        const height = width / aspect;
+        return [width, height];
+    } else {
+        const height = targetHeight;
+        const width = height * aspect;
+        return [width, height];
+    }
+}