响应式图像地图可以在电脑上使用，但不能在手机上使用

Question

站点：https://beststoresupplies.com

链接在电脑上点击正常，但在手机上，
只有第一排有效。
在设置区域的高度时，它应该是33.33%，因为我有3行，但它甚至在电脑上也不起作用。
所以我把它设置为11%，并在PC上工作。
但在手机上，第二排和第三排的位置相距甚远

这里有专家可以帮忙吗

<div class="image">
<img src="/image/data/01000/category12.jpg"   
alt="FixtureDisplays Brand Image" 
title="FixtureDisplays Brand Image" 
class="img-responsive"/>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=candy%20bin" title="Candy Bins" style="position: absolute; left: 0%; top: 0%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=donation%20box" title="Donation Boxes" style="position: absolute; left: 25%; top: 0%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=podium" title="Podiums" style="position: absolute; left: 50%; top: 0%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=card%20rack" title="Greeting Card Rack" style="position: absolute; left: 75%; top: 0%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=menu%20board" title="Menu Board" style="position: absolute; left: 0%; top: 11%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=file%20organizer" title="File Organizer" style="position: absolute; left: 25%; top: 11%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=kettle" title="Kettles" style="position: absolute; left: 50%; top: 11%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=phone%20locker" title="Lockers" style="position: absolute; left: 75%; top: 11%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=wire%20rack" title="Wire Rack" style="position: absolute; left: 0%; top: 22%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=mobile%20sink" title="Mobile Sink" style="position: absolute; left: 25%; top: 22%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=hat+rack&page=3" title="Hat Rack" style="position: absolute; left: 50%; top: 22%; width: 25%; height: 11%; z-index: 2;"></ a>
<a href="https://www.fixturedisplays.com/index.php?_route_=Showcase_10111&search=10111" title="Showcases" style="position: absolute; left: 75%; top: 22%; width: 25%; height: 11%; z-index: 2;"></ a>
</div>

Answer 1

对此答案的第三次编辑：

以下解释，

这一次，代码只在HTML中，也有CSS，但在HTML 中

以下是我在视频中的操作方法：https://i.stack.imgur.com/U9Oo1.jpg

将代码更改为：

<!-- COPY only this new 20 lines of html from StackOverFlow - Laaouatni -->
<div style="position: relative;" class="bg-image">
<!-- your image background -->
<img style="max-width: 100%; height: auto;" src="https://www.beststoresupplies.com/image/data/01000/category12.jpg" alt="FixtureDisplays Brand Image" title="FixtureDisplays Brand Image" class="img-responsive" />
<!-- for changes, style only the parent element -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr);  position: absolute; top: 0; left: 0; width: 100%; height: 100%;" class="product-links">
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=candy%20bin" title="Candy Bins"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=donation%20box" title="Donation Boxes"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=podium" title="Podiums"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=card%20rack" title="Greeting Card Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=menu%20board" title="Menu Board "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=file%20organizer" title="File Organizer "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=kettle" title="Kettles "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=phone%20locker" title="Lockers"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=wire%20rack" title="Wire Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=mobile%20sink" title="Mobile Sink"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=hat+rack&page=3" title="Hat Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?_route_=Showcase_10111&search=10111" title="Showcases"></a>
</div>
</div>

2编辑答案

gif查看其工作原理：https://i.stack.imgur.com/qjvNC.jpg

下方的说明

.bg-image {
/* DON'T delete this... is important for the .product-links child */
position: relative;
}
.bg-image img {
/* responsive image */
max-width: 100%;
height: auto;
}
.product-links {
/* grid of 4 items in a columns, automatic number of rows*/
display: grid;
grid-template-columns: repeat(4, 1fr);
/* the links now are above the background (image) */
/* don't change: if you want to change... before using absolute, you need to set the parent to position:relative */
position: absolute;
top: 0;
left: 0;
/* the parent of links, set dimensions 100% width and height 100% (100% of the parent so the image, not the all screen) */
width: 100%;
height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- this is the parent, that in css set -->
<div class="bg-image">
<!-- this is your src link of background-image -->
<img src="https://www.beststoresupplies.com/image/data/01000/category12.jpg" alt="FixtureDisplays Brand Image" title="FixtureDisplays Brand Image" class="img-responsive" />
<!-- links -->
<!-- if you want to make changed with grid, change the parent css for change all elements inside -->
<div class="product-links">
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=candy%20bin" title="Candy Bins"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=donation%20box" title="Donation Boxes"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=podium" title="Podiums"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=card%20rack" title="Greeting Card Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=menu%20board" title="Menu Board "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=file%20organizer" title="File Organizer "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=kettle" title="Kettles "></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=phone%20locker" title="Lockers"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=wire%20rack" title="Wire Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=mobile%20sink" title="Mobile Sink"></a>
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=hat+rack&page=3" title="Hat Rack"></a>
<a href="https://www.fixturedisplays.com/index.php?_route_=Showcase_10111&search=10111" title="Showcases"></a>
</div>
</div>
</body>
</html>

以前的回答

所以不要使用position，因为对于响应式布局很难维护。。。

可以使用CSS GRID或CSS FLEXBOX

所以对于CCD_ 2，一列中总是有4个项目，
如果超过4行，CSS GRID将自动为您创建更多的行。

我在你的网站上看到你做了响应图像，太好了！width: 100%; height: auto;

HTML似乎有一些问题，因为您有一个名为.image的父级，但只有一个元素是图像。。。
其他元素是<a>链接，但当我看到你的网站似乎运行良好时(我不知道你是否使用CMS(但是，我将HTML更改为在<a>中嵌套<img>

试着运行代码片段，并告诉我这是否是您所需要的。

这只是一个测试版，您需要更改带有图像链接地址的src。

这只是代码的测试版，不要直接在生产网站上复制和粘贴
尝试查看代码并根据需要进行更改。

这里是演示代码：

.image {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.image img {
width: 100%;
height: auto;
max-width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image">
<!-- 1 -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="FixtureDisplays Brand Image" title="FixtureDisplays Brand Image" class="img-responsive" />
<!-- 2 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=candy%20bin" title="Candy Bins">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 3 -->
<a href=" https://www.fixturedisplays.com/index.php?route=product/search&search=donation%20box" title="Donation Boxes">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 4 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=podium" title="Podiums">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 5 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=card%20rack" title="Greeting Card Rack">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 6 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=menu%20board" title="Menu Board">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 7 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=file%20organizer" title="File Organizer">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 8 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=kettle" title="Kettles">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 9 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=phone%20locker" title="Lockers">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 10 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=wire%20rack" title="Wire Rack">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 11 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=mobile%20sink" title="Mobile Sink">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
<!-- 13 -->
<a href="https://www.fixturedisplays.com/index.php?route=product/search&search=hat+rack&page=3" title=" Hat Rack ">
<!-- change the src of image to your link -->
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</a>
</div>
</body>
</html>