基于CSS的图像映射的不变缩放

Question

我使用的是一个基于CSS的图像映射，无论浏览器窗口大小，我都希望它能正确显示。当然，实际上有多个环节。

我的HTML。。。

<div id="sitemap" >
<img src="img.jpg" class="center"/>
<a href="url1.html"    id='id1'></a>
</div

还有CSS。。。

#sitemap img{
max-width: 100vw;
max-height: 100vh;
position: relative;
}
#sitemap a {
display: block;
position: absolute;
}
#sitemap a:hover {
background: rgba(255, 255, 0, 0.5);
border-radius: 20px;
}
a#archive { 
top: 48%;
margin-left: 14%;
width: 20%;
height: 15%;
}

这在又高又窄的浏览器中效果很好，但当浏览器窗口比它高时，百分比会考虑空白边栏中的死区。如何使百分比仅考虑实际图像？

Answer 1

所以你知道原因了。这是因为div(id=sitemap(的宽度。这个怎么样？

#sitemap {
/* for debug background-color: red; */
/* make sure the div width only size of contents */
display: inline-flex;
/* You set position relative to "img", but it semmed doesn't work because it isn't a parent‐child relationship */
position: relative;
}
#sitemap img{
max-width: 100vw;
max-height: 100vh;
/* position: relative; */
}
a#archive {
/* I think it's good enough setting two properties, unless you aren't particular about the details. */
top: 10%;
left: 10%;
}