將圖像拆分為許多較小的圖像，並允許來自每個單獨圖像的超鏈接（如圖像映射）

Imo 发表于 Dev

伊莫

概括

我有一個圖像 (1920px x 1080px)，我想將其分成 40px x 40px 的小圖像。我想在網頁上顯示圖像，使其看起來像原始的完整 1920x1080 圖像。它將是 48 個圖像寬（列）乘以 27 行。

對於每個圖像，我希望能夠擁有不同的超鏈接和替代文本。

當屏幕尺寸被動地改變時，我希望圖像也按比例縮小，這樣它們就不會環繞頁面，或者滾出頁面。

框架

目前使用 Vue 和 Vuetify。

試過

我嘗試使用完整圖像而不將其拆分並在其上放置圖像映射。這在全屏時完美運行，但是，當頁面響應調整大小時，由於底層圖像大小已更改，圖像映射坐標被破壞。我無法弄清楚如何獲得圖像的比例以相應地調整圖像映射。

        <template v-slot:activator="{ on, attrs }">
        <v-img ref="imageShow" usemap="" class="image" contain src="@/assets/sections/fullsize_image.jpg" v-resize="onResize">
            <!-- Loop over array of plots by row & col to generate this.
                Eg. top: = rowId * 40... 
                    left: = colPos * 40
            -->
            <span v-for="(i, row) in listSections"
                :key="row"
                justify="center" align="center" class="d-flex flex-nowrap"
            >
                <!-- i contains an object with URL, alt text etc in it -->
                <span
                    v-for="col in Object.keys(i)"
                    :key="col"
                >
                    <a v-bind="attrs" v-on="on" @click="info = i[col]" :style="`${ returnStyle(row,col) }`"></a>
                </span>
            </span>
        </v-img>
        </template>

而returnStyle是一個計算函數，用於計算圖片各部分的圖像映射。如果由於響應式圖像調整大小而調整了圖像，我不確定如何在計算函數中考慮這一點：

    computed: {
    returnStyle: function() {
        return function(row, col) {
            return "position:absolute; top: " + (row * 40) + "px; left: " + (col * 40) + "px; height:40px; width: 40px;"
        }
      }
    }

我試過 Vuetify v-row's 和 v-col's 來包含 v-img ......圖像沒有正確縮小，或者它們正在包裝或只是滾動頁面（class="d-flex flex-nowrap ”）。

 <v-container pa-0 fluid ma-0>
     <v-row no-gutters style="maxWidth: 1920px; width: 100%;" class="d-flex flex-nowrap">
         <v-col>
             <v-img :src="require(`../assets/section/section_0_0.jpg`)"></v-img>
         </v-col>
         <!-- ... 46 more v-col/v-img's  -->                                  
     </v-row>
     <v-row no-gutters style="maxWidth: 1920px; width: 100%;" class="d-flex flex-nowrap">
         <v-col>
             <v-img :src="require(`../assets/section/section_2_0.jpg`)"></v-img>
         </v-col>
         <!-- ... 46 more v-col/v-img's  -->                          
     </v-row>       
     <v-row no-gutters style="maxWidth: 1920px; width: 100%;" class="d-flex flex-nowrap">
         <v-col>
             <v-img :src="require(`../assets/section/section_2_0.jpg`)"></v-img>
         </v-col>
         <!-- ... 46 more v-col/v-img's  -->
     </v-row>             
 </v-container>

我曾建議為此查看 Flex 或 CSS Grid，但是，我有點擔心我會結束對它們的試驗並最終遇到同樣的問題。

任何建議都非常感謝。謝謝。

一個霍沃思

您可以將圖像作為背景放置到具有視口寬度（或您需要的任何其他尺寸）的容器中，並由此計算合適的高度並顯示為網格。

這是一個簡單的純 JS/CSS 示例：

const numCols = 1920 / 40;
const numRows = 1080 / 40;
const container = document.querySelector('.container');
for (col = 1; col <= numCols; col++) {
  for (row = 1; row <= numRows; row++) {
    let a = document.createElement('a');
    a.style.gridColumn = col + ' / ' + (col + 1);
    a.style.gridRow = row + ' / ' + (row + 1);
    a.style.opacity = 0;
    a.href = 'url for cell ' + row + ', ' + col;
    container.appendChild(a);
  }
}

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  grid-template-rows: repeat(27, 1fr);
  width: 100vw;
  height: calc(100vw * 1080 / 1920);
  gap: 0;
  background-image: url(https://picsum.photos/id/1016/1920/1080);
  background-size: contain;
  background-repeat: no-repeat;
}