html - 将元素固定到背景大小为 : cover 的 div

Question

我有一个显示 map 的页面，其中一些图钉放置在感兴趣的地方。标记和样式如下:

HTML:

<div class="map">
  <div class="pins">
    <a href="#">Pin #1</a>
    ...
    <a href="#">Pin #12</a>
  </div>

CSS:

.map {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent url([image]) no-repeat 50% 50%;
  background-size: cover;
}

.pins {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
{

.pins > a {
  width: 20px;
  height: 31px;
  position: absolute;
}

我的问题是:如何使绝对定位到 map 上特定位置的图钉与 map 正确对齐？我试过对图钉位置使用百分比值，但因为 map 始终居中，一旦 map 开始在两侧裁剪，对齐就会消失。

我意识到我可以实现 JS 修复，但我想知道是否有针对此的纯 HTML/CSS 解决方案。

谢谢。

Answer 1

我喜欢你的问题!

所以背景尺寸封面的作用是保持图像的透视。这样你就不知道图像的显示尺寸是多少。除非你一开始就知道这个比率。

我用 fluid-video-padding-bottom "hack" 做了一些实验.想象一下 16/9 的 map 。
您所需要的只是一个恰好位于图像顶部的容器(或者它可以是与我的示例中完全相同的容器)，并且其行为与背景大小的封面相同。使用 padding-bottom 技巧实现。剩下要做的唯一一件事就是相应地调整图钉的大小。 (我使用了基于视口(viewport)的单位)

My example .

padding-bottom: 56.25%; /* 16:9 */

您可以使用适合对象的定位，而不是使用底部填充技巧。目前还没有得到很好的支持。