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

【问题标题】：How to keep an image map from overflowing from a DIV?如何防止图像映射从 DIV 溢出？
【发布时间】：2020-06-06 04:43:03
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html css image-size

【解决方案1】：

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

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

在您的 HTML 中，第一个形状的坐标为 coords="220,794, 478, 1668"y1，x2 和 y2 已经在图像之外，因此您将无法单击它，因为它根本不存在。

所以要按照您的建议解决这个问题，您应该将宽度和高度属性都设置为 100% 并相应地更改坐标。

【讨论】：