这是很容易与网格-你可以风格的网格任何方式，你喜欢，但在这里我“超级中心”，并使用一个区域名称，把两个元素在同一个网格象限，然后使用负边距移动文本一点。
我改变了布局，把div放在图像外面，以进一步说明该元素与“flow”的位置，它通常在下面。
请记住，在这个例子中，图像将缩放一点，但这只是风格，可以设置大小，宽高比等。
注意：如果你真的想要一个“网格”，你可以设置容器的背景，然后在你想要的大小的网格上设置行/列，然后把文本放在你想要的任何网格单元格中。

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.img-container {
  background-color: #0000ff20;
  margin: 2em;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  grid-template-areas: "herewego";
  place-items: start;
}

.grid-block {
  grid-area: herewego;
  border: 1px solid;
  width: 100%;
  height: 100%;
}

.my-image-block {
  border-color: #00FF00;
}

.overlay {
  background-color: transparent;
  color: red;
  font-size: 3em;
  padding-top: 1.125em;
  padding-left: 3.125em;
  border-color: #FF0000;
}

<div class="img-container grid-container">
  <div class="my-image-block grid-block">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/></pattern>
        <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
          <rect width="80" height="80" fill="url(#smallGrid)"/>
          <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
  </svg>
  </div>
  <div class="overlay grid-block">Element</div>
</div>

我做了一个组件的插槽，所有你的地方将被调整大小。我没有使用JQuery，但我使用vue3-resize库，由于VUE3的观察者功能，您也可以在没有此库的情况下实现它https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/#article-header-id-1。

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import 'vue3-resize/dist/vue3-resize.css'
    
    const bodyMapContainer = ref(null)
    const scalableContainer = ref(null)
    const scale = ref(0)
    
    onMounted(() => {
      doResize(bodyMapContainer.value.offsetWidth, bodyMapContainer.value.offsetHeight)
    })
    
    const handleResize = ({ width, height }) => {
      doResize(width, height)
    }
    
    const doResize = (width: number, height: number) => {
      const innerWidth = scalableContainer.value.offsetWidth
      const innerHeight = scalableContainer.value.offsetHeight
    
      scale.value = Math.min(width / innerWidth, height / innerHeight)
    }
    </script>
    
    <template>
      <div ref="bodyMapContainer" class="body-map-container">
        <resize-observer @notify="handleResize" />
        <div
          ref="scalableContainer"
          class="scalable-container"
          :style="{ transform: 'translate(-50%, -50%) ' + 'scale(' + scale + ')' }"
        >
          <slot></slot>
        </div>
      </div>
    </template>
    <style>
    .body-map-container {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto;
      left: 0%;
    }
    .scalable-container {
      width: 1000px;
      height: 750px;
      padding: 5px;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }
    </style>

用途：

<ViewBoxPanel>
        ... place here everything you want
        <ViewBoxPanel>
``