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

Question

我正在使用基于 CSS 的图像映射，无论浏览器的大小如何，我都想正确显示它 window。当然其实还有多个链接。

我的 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%;
}

这在又高又窄的浏览器中效果很好，但是当浏览器 window 比高度宽时，百分比会考虑空白边栏中的死 space。如何让百分比只考虑实际图像？

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%;
}

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

invariant scaling for CSS based image map

css

scaling

imagemap