我有一个元素,我想使用网格布局设计中可用高度的 100%。
我拥有的是这个:
.wrapper {
background: #F7F7F7 !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
grid-template-areas: "a b c" "d e f";
}
.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: c;
}
.four {
grid-area: d;
}
.five {
grid-area: e;
}
.six {
grid-area: f;
}
<div class="wrapper">
<div class="one">
<image height="100%">
</div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
如何使图像的高度使用可用的 one
高度的 100%?
谢谢!
答案 0 :(得分:0)
你可以给它一个类并使它的宽度和高度为 100%
.wrapper {
background:#000 !important;
width:100%;
height:100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
padding:20px;
grid-template-areas:
"a b c"
"d e f";
}
.scene{
width:100%;
height:100%;
}
.white{
background:#fff;
}
.one{
grid-area:a;
}
.two{
grid-area:b;
}
.three{
grid-area:c;
}
.four{
grid-area:d;
}
.five{
grid-area:e;
}
.six{
grid-area:f;
}
<div class="wrapper">
<div class="one white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="two white"></div>
<div class="three white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="four white"></div>
<div class="five white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="six white" ></div>
</div>