如何防止图像映射从 DIV 溢出？

Question

我在 div 中有一个图像映射。当我加载页面时，地图图像溢出 div 所以我必须滚动到页面右侧。我想要它，这样图像就可以在页面上显示，而不必向右滚动。

我尝试使用 img{width: 100%}，但是这使得地图链接无法点击。

.uc {
  background: linear-gradient(to right, red, white, black);
  margin: auto;
  vertical-align: middle;
  border-radius: 15px;
  box-shadow: 20px 20px 10px #888888;
  width: 25%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  text-align: center;
  background-color: white;
  opacity: 0.8;
}

body {
  background-image: url("back.png");
  background-repeat: repeat-x;
}

.descrip {
  border-color: black;
  border: 2px solid;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

img {
  width: 100%;
}

<body>
  <h1>Lesson 2</h1>
  <div class="descrip">
    <h1>Interactive Diagram</h1>
    <p>Click on the below image to explore various parts of the motherboard including: </p>
    <ul>
      <li>CMOS Battery</li>
      <li>SLI Chip</li>
      <li>CPU Socket</li>
      <li>RAM Sockets</li>
    </ul>
    <img src="mb1.png" alt="Motherboard" usemap="#mbmap">
    <map name="mbmap">
  <area shape="rect" coords="220,794, 478, 1668" href="https://en.wikipedia.org/wiki/Random-access_memory"
  alt="RAM">
  <area shape="rect" coords="547,493,1007,743" href="https://en.wikipedia.org/wiki/Scalable_Link_Interface"
  alt="SLI Chip">
  <area shape="rect" coords="569,1072, 975, 1468" href="https://en.wikipedia.org/wiki/Central_processing_unit"
  alt="CPU Socket">
  <area shape="circle" coords="618,186,64" href="https://en.wikipedia.org/wiki/Nonvolatile_BIOS_memory"
  alt="CMOS">
 </map>
  </div>
  <hr>
  <div class="uc">
    <a href="hw4.html">&lt; &lt; LESSON 1</a>
  </div>
</body>

Answer 1

您的问题是您更改了图像的宽度，但没有更改形状坐标的坐标。

基本上，您将坐标设置在缩放图像之外。所以，你的坐标不正确。假设您的图像是 500x500，因为您将图像宽度设置为 100%，而容器 div descrip 宽度为 80%，您的图像将是 400x500，这就是您的新图像尺寸。

在你的 HTML 中，第一个形状的坐标是 coords="220,794, 478, 1668" y1、x2 和 y2 已经在图像之外，所以你无法点击它，因为它不存在于第一位。

因此，要解决这个问题，正如您已经建议的那样，您应该将宽度和高度属性都设置为 100%，并相应地更改坐标。

如何防止图像映射从 DIV 溢出？

How to keep an image map from overflowing from a DIV?

html

css

image-size