如何在Vue中将两张图片合并并实现响应式适配？

<template>
  <div class="container">
    <img :src="imgUrl1" alt="图片1" />
    <img :src="imgUrl2" alt="图片2" />
  </div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  data() {
    return {
      imgUrl1: '图片1地址',
      imgUrl2: '图片2地址',
    };
  },
  mounted() {
    // 动态计算根字体大小，基于视口宽度
    const calcRem = () => {
      const docWidth = document.body.clientWidth;
      const rootFontSize = calcVw(docWidth / 375 * 100, 16);
      document.documentElement.style.fontSize = `${rootFontSize}px`;
    };

    // 媒体查询，针对最大宽度为365px的设备
    const query = window.matchMedia('(max-width: 365px)');
    const handleMediaQuery = e => {
      if (e.matches) {
        // 这里写针对最大宽度为365px的设备的样式调整逻辑
      } else {
        // 这里写针对非最大宽度为365px的设备的样式调整逻辑
      }
    };
    query.addListener(handleMediaQuery);

    onMounted(() => {
      calcRem();
    });
  },
};
</script>

<style>
.container {
  display: flex;
}

img {
  width: 50%;   // 这里也可以使用动态单位，如vw
}

@media (max-width: 365px) {
  /* 针对最大宽度为365px的设备的样式调整 */
}
</style>