Question

嘿，我有带背景图像的容器，我将“别针”添加到容器中并设置位置。但问题是调整窗口大小。虽然调整销钉位置的大小不会保留（特别是垂直）。如何将位置设置为始终与背景图像保持在同一位置？

CSS：

.building {
  height: 100%;
  width: 100%;
  position: relative;
  background: transparent url('http://svgshare.com/i/403.svg') no-repeat left center/contain;

  &__item {
    position: absolute;
    z-index: 50;
    &--1 {
      bottom: 11%;
      left: 24%;
    }
    &--2 {
      bottom: 18%;
      left: 10%;
    }
    &--3 {
      bottom: 10%;
      left: 38%;
    }
    &--4 {
      bottom: 20%;
      left: 43%;
    }
    &--5 {
      bottom: 48%;
      left: 84%;
    }
    &--6 {
      bottom: 38%;
      left: 30%;
    }
    &--7 {
      bottom: 70%;
      left: 84%;
    }
    &--8 {
      bottom: 23%;
      left: 86%;
    }
    &--9 {
      bottom: 60%;
      left: 68%;
    }
    &--10 {
      bottom: 8%;
      left: 30%;
    }
    &--11 {
      bottom: 35%;
      left: 84%;
    }
  }

Answer 1

您无法通过纯CSS和background-image将大小调整方法设置为contain来实现此目的。

然而，您可以使用纯CSS并使用<img />标记来加载svg，因为图像在缩放时会保持比例。

首先，您需要在img

中添加.building标记

使标记为0x0px宽和高，并将它们的负边距偏移为宽度和高度的一半。

这样，当您使用百分比时，标记的中心将始终是您的锚点。（如果你使用top％和left％。在你的情况下你使用bottom％，所以你需要添加15px）

将.building的显示设置为inline-block - 这样就可以“＃34;环绕＆＃34;图像。

您现在可以使用响应式图像来控制低谷的宽度.building{width:XX%}

Demo

.building {
  width: 100%;
  position: relative;

  img{
    width:100%;
  }

  &__item {
    position: absolute;
    z-index: 50;
    width: 0;
    height: 0;
    margin-left: -15px; //sub half of width
    margin-top: 15px; // add half of height
    ...

到目前为止，您将使用纯CSS。对于任何更高级的东西，使用jQuery和Responsive Hotspot Plugin

祝你好运！

Answer 2

如果您拥有图像的原始宽度和高度以及标记的初始位置，则可以通过执行以下操作计算标记的新x位置：

newX =（initialX / originalWidth）* newWidth

y位置也是如此。

这是一个使用JS重新计算位置的简单示例，只要窗口调整大小。

让我们把标记贴在篮球上;）

var img = new Image()
var wrapper = document.getElementsByClassName('wrapper-inner')[0]
var marker = document.getElementsByClassName('marker')[0]
var initialPos = {x:740, y:555}
var padding = 25
var imgW = 0
var imgH = 0

img.onload = function() {
  wrapper.firstElementChild.src = this.src
  imgW = this.width
  imgH = this.height
  resize()
}
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Finish_%28235964190%29.jpg/1024px-Finish_%28235964190%29.jpg'

function resize() {
    var imgRect = wrapper.getBoundingClientRect();
    marker.style.left = ((initialPos.x/imgW) * imgRect.width) - padding + "px"
    marker.style.top = ((initialPos.y/imgH) * imgRect.height) - padding + "px"
}
window.onresize = resize

body {
  margin: 0;
}
.wrapper {
  text-align: center;
}
.wrapper-inner {
  display: inline-block;
  font-size: 0;
  position: relative;
}
.wrapper-inner img {
  width: 100%;
  height: auto;
}
.marker {
  font-size: 32px;
  color: red;
  font-weight: bold;
  border-radius: 25px;
  line-height: 1.5;
  width: 50px;
  height: 50px;
  background: white;
  position: absolute;
  left: 0;
  top: 0;
  z-index: +1;
}

<div class="wrapper">
  <div class="wrapper-inner">
    <img src="" alt="">
    <span class="marker">&starf;</span>
  </div>
</div>

调整大小时保留元素在背景图像方面的位置

2 个答案:

Demo