Как сохранить карту изображения от переполнения из DIV? - PullRequest
Новая
       68

Как сохранить карту изображения от переполнения из DIV?

0 голосов
/ 21 февраля 2020

У меня есть карта изображения внутри 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>

1 Ответ

0 голосов
/ 21 февраля 2020

Ваша проблема в том, что вы изменили ширину вашего изображения без изменения координат координат ваших фигур.

По сути, вы устанавливаете свои координаты вне масштабированного изображения. Итак, ваши координаты не верны. Скажем, ваше изображение было 500x500, а поскольку вы установили ширину изображения на 100%, а ширина контейнера descrip составила 80%, ваше изображение будет 400x500, то есть ваши новые размеры изображения.

В вашем HTML координаты первой фигуры были coords="220,794, 478, 1668" y1, x2 и y2 уже вне изображения, поэтому вы не сможете щелкнуть по нему, потому что он не существует в первую очередь.

Таким образом, чтобы решить это, как вы уже предлагали, вы должны установить свойства ширины и высоты на 100% и соответственно изменить свои координаты.

...