概括
我有一個影像 (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 ......影像沒有正確縮小，或者它們正在包裝或只是滾動頁面（default s-code-block">
<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，但是，我有點擔心我會結束對它們的試驗并最終遇到同樣的問題。
任何建議都非常感謝。謝謝。
uj5u.com熱心網友回復：
您可以將影像作為背景放置到具有視口寬度（或您需要的任何其他尺寸）的容器中，并由此計算合適的高度并顯示為網格。
這是一個簡單的純 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;
}<div class="container">
</div>您可能希望在每個單元格中包含一個帶有 src（透明 png）的實際 img 以在其中獲取 alt。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370465.html
標籤：css Vue.js 弹性盒 Vuetify.js
上一篇：v-if事件總線事件后不更新