css - invariant scaling for CSS based image map

Question

I'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.

My HTML ...

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

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

This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?

标签： cssscalingimagemap

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