在文档的此页面上,我需要在页面上混乱地排列图像。我的方法是通过topleft百分比值调整每个值。图形元素的行为异常。 #num1根本不响应顶部,而#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

这是我正在努力的模型。
html - 元素在文档中的位置不一致-LMLPHP

如果您对为什么要使用这些figure有所了解,或者您有替代/改进的方法,请告诉我。

另外-一旦安排好这些,我计划添加脚本。on(mouseover)将非悬停的figure推离悬停的元素。如果有一种编写脚本可以处理的html / css的方法,那么为您带来加分。

最佳答案

我在这里创建了不更改框和图像格式的示例。
因此,第一张图片将仍然具有相同的格式:3:2。


框绝对放置在文档上(左上角),宽度也根据文档尺寸计算得出。
box-border(边框)可创建正确的框格式。
image-wrapper(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>





编辑:添加了包装盒,因为第二行的问题。

关于html - 元素在文档中的位置不一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39177914/

10-12 12:51
查看更多