在文档的此页面上,我需要在页面上混乱地排列图像。我的方法是通过top
和left
百分比值调整每个值。图形元素的行为异常。 #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
这是我正在努力的模型。
如果您对为什么要使用这些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/