代码之家 › 专栏 › 技术社区 › Toniq

在量表上,孩子在家长中的保留百分比

percentage javascript

0

Toniq · 技术社区 · 2 年前

我在图像上有一个针(红点),上面设置了百分比位置。

重新调整父包装容器的大小时,如何保持相对于图像的固定位置?(调整包装容器的大小以查看问题)

#wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.pin{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:40%;
  top:40%;
}
img{
  display:block;
  width:100%;
}

<div id="wrap">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg"/>
  <div class="pin"></div>
</div>

0 回复 | 直到 2 年前

1

collab-with-tushar-raj 2 年前

我试着把球打得天衣无缝,但由于时间限制,我没能打出最好的球。然而 pin 是 relative 调整大小时 wrap 垂直和水平。不知道我在这方面帮了你多少忙。

笔记 :您可以将调整大小限制为一定的限制( 最小宽度和高度 )因此 大头针 当用户尝试调整 包 到几乎“ 零(0)个维度 ".

window.addEventListener('resize', positionPin);

function positionPin() {
  const img = document.querySelector('img');
  const pin = document.querySelector('.pin');
  const imgWidth = img.clientWidth;
  const imgHeight = img.clientHeight;

  const pinLeft = imgWidth * 0.4; // 40% of the image width
  const pinTop = imgHeight * 0.4; // 40% of the image height

  pin.style.left = `${pinLeft}px`;
  pin.style.top = `${pinTop}px`;
}

#wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  resize: both;
  overflow: auto;
}

.pin {
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:40%;
  top:40%;

}

img {
  display: block;
  width: 100%; 
}

<div id="wrap">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg"/>
  <div class="pin"></div>
</div>