跨文档的元素定位不一致

Question

在文档的这个页面上，我需要在页面上杂乱地排列图像。我的方法是通过top和left百分比值调整每个值。数字元素表现得很奇怪。 #num1根本没有响应top，而#num4需要极值来运行，但#num5做得很好。所有6 #num具有相同的属性。 1-3位于<div id="divA" class="row">下，而4-6位于<div id="divB" class="row">

之下

这是我的CodePen的链接。

http://codepen.io/WallyNally/pen/QEZKrV

这是我正在努力的模型。

如果您对这些figure难以解决的原因有所了解，或者您有其他/改进方法，请告知我们。

此外 - 一旦这些被安排，我计划添加脚本将.on（鼠标悬停）推出非悬停的figure s远离悬停元素。如果有一种方法可以编写适合脚本处理的html / css，那么你可以获得奖励积分。

Answer 1

我在这里创建了一个示例，它不会改变框和图像的格式。 因此，第一张图片的格式仍然相同：3：2。

• 框绝对定位于文档（topleft corner），宽度也是根据文档大小计算的。
• box-border（s）创建正确的框格式。
• image-wrapper（s）为图像创建位置 - 它应该位于隐藏的角落上。
• image-size（s）创建正确的图像格式
• img使用object-fit，它与所有浏览器都不兼容。如果您正在寻找可以在每个现代浏览器上运行的东西，您可以使用背景css样式。还有一个很好的解决方法，如果你还需要用于SEO的img标签（找到解决方案2）：Is there an equivalent to background-size: cover and contain for image elements?

#boxes-wrapper {
  position: relative;
  width: 100%;
  padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
}
.box-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0 0 0 2px #5f2325;
  -moz-box-shadow: 0 0 0 2px #5f2325;
  -ms-box-shadow: 0 0 0 2px #5f2325;
  -o-box-shadow: 0 0 0 2px #5f2325;
  box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
  position: absolute;
  height: 0;
}
.image-size {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.image-size img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#box1 {
  top: 21.48%;
  left: 4.88%;
  width: 24.54%;
}
#box1 .box-border {
  padding-top: 67.96%;
}
#box1 .image-wrapper {
  bottom: -2.5%;
  left: -3.05%;
  width: 92.52%;
}
#box1 .image-size {
  padding-top: 66.46%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#box2 {
  top: 31.36%;
  left: 36%;
  width: 19%;
}
#box2 .box-border {
  padding-top: 67.8%;
}
#box2 .image-wrapper {
  top: -7.85%;
  left: -10.68%;
  width: 92.52%;
}
#box2 .image-size {
  padding-top: 66.54%;
}
#box4 {
  top: 54.67%;
  left: 1.42%;
  width: 24.61%;
}
#box4 .box-border {
  padding-top: 67.77%;
}
#box4 .image-wrapper {
  bottom: -11.38%;
  left: 10.74%;
  width: 66.94%;
}
#box4 .image-size {
  padding-top: 104.12%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

<div id="boxes-wrapper">
  <div id="box1">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box2">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box4">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x469/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
</div>

编辑：添加了box-wrapper，因为第2行有问题。