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

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

1 个答案: