我对 css 网格非常陌生,无论出于何种原因,我都很难让我的图像落入网格中。他们似乎代表我的网格顶部而不是内部..任何帮助将不胜感激..
我在边框上添加了颜色,以勾勒出我想要的形状和内容。
* {
width: 100% margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
width: 100% position: absolute;
display: grid;
height: 100vh;
border: 10px solid green;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-items: flex-center;
}
.grid-item {
background-color: Grey;
border: 4px solid orange;
padding: 10px;
font-size: 30px;
}
.container2 {
object-fit: cover;
max-width: 50% height:auto;
}
.grid-container .image {
position: relative;
max-width: 100%;
height: auto;
}
.div1 {
grid-area: 1 / 1 / 3 / 3;
max-width: 100%;
height: auto;
object-fit: contain;
}
.div2 {
grid-area: 1 / 3 / 2 / 4;
max-width: 100%;
}
.div3 {
grid-area: 1 / 4 / 2 / 5;
max-width: 100%;
}
.div4 {
grid-area: 1 / 5 / 2 / 6;
max-width: 100%;
}
.div5 {
grid-area: 2 / 3 / 3 / 4;
max-width: 100%;
}
.div6 {
grid-area: 2 / 4 / 3 / 5;
max-width: 100%;
}
.div7 {
grid-area: 2 / 5 / 3 / 6;
max-width: 100%;
}
<div class="grid-container">
<div class="grid-item div1">
<div class="container2">
<img src="https://www.wendtcorp.com/wp-content/uploads/2020/08/Sikirica-600x600-1.jpg" alt="Srdjan Sikirica" class="image"> </img>
<div class="overlay">Srdjan Sikirica</div>
</div>
</div>
<div class="grid-item div2">Test2
</div>
<div class="grid-item div3 ">test3
</div>
<div class="grid-item div4 ">test4
</div>
<div class="grid-item div5">test5
</div>
<div class="grid-item div6 ">test6
</div>
<div class="grid-item div7">test7
</div>
我观看了一些视频,这就是我所了解的,我仍在学习如何以及何时将类(class)和内容结合起来。我做了一些很好的搜索,大多数人只是将信息简介放在一起,这根本没有帮助。
感谢您提供的所有帮助!!
最佳答案
这是你想要的吗?
我添加了对象位置:0% 0%;如果你想让图像位于中心,你需要使用 50% 50%
.container2 {
width: 100%;
height: 100%;
}
.container2 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: 0% 0%;
}
关于HTML 图像网格图像不在网格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63693364/