单元格中的css网格响应图像_Css_Css Grid

单元格中的css网格响应图像

css

单元格中的css网格响应图像,css,css-grid,Css,Css Grid,我尝试采用这种设计：并使用css网格创建响应性布局到目前为止，我有以下内容（顺便说一句，对cssgrid来说是非常新的）： css: html: C D F G 我正在努力完成几件事：布局的全高/全宽反应灵敏的图像集中在细胞内我遇到的问题：这些图像会导致垂直滚动条如果我将图像宽度设置为50%（作为测试），我就不知道如何将它们居中将css网格与css flex相结合，实现您的成就： html: 使用媒体查询操作手机布局我尝试了一下，不确定它是否正是您需要的 Html: 看

我尝试采用这种设计：

并使用css网格创建响应性布局

到目前为止，我有以下内容（顺便说一句，对cssgrid来说是非常新的）：

css:

html:


C
D
F
G

我正在努力完成几件事：

布局的全高/全宽

反应灵敏的图像集中在细胞内

我遇到的问题：

这些图像会导致垂直滚动条

如果我将图像宽度设置为50%（作为测试），我就不知道如何将它们居中

将css网格与css flex相结合，实现您的成就：

html:

使用媒体查询操作手机布局

我尝试了一下，不确定它是否正是您需要的

Html:

看起来你已经完成了100%宽度和高度的布局。您要做的是从HMTL中删除

标记，只需对图像使用background属性。此样式规则：

background:url(https://placeimg.com/220/220/any)中心/盖为您提供一个居中的图像，该图像响应地覆盖div：

*{
框大小：边框框；
填充：0；
保证金：0；
}
.gridwrapper{
保证金：0自动；
显示：网格；
栅隙：10px；
网格模板柱：1fr 1fr 1fr 1fr；
颜色：#444；
高度：100vh；
}
.盒子{
背景色：#444；
颜色：#fff；
填充：20px；
字体大小：150%；
}
.a{
网格柱：1；
网格行：1/2跨；
}
.b{
网格柱：2；
网格行：1；
背景：url(https://placeimg.com/220/220)中心/盖；
}
.b img{宽度：100%；}
c{
网格柱：3；
网格行：1；
}
博士{
网格柱：4；
网格行：1；
}
e{
网格柱：2；
背景：url(https://placeimg.com/220/220/any)中心/盖；
}
.e img{宽度：100%；}

C
D
F
G

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.gridwrapper {
    margin:0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #fff;
    color: #444;
    height:100vh;

}

.box {
    background-color: #444;
    color: #fff;

    padding: 20px;
    font-size: 150%;

}

.a {
    grid-column:1;
    grid-row: 1 /span 2;
    background-image: url("images/grid2018guide/images/leftbar_02.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.b {
    grid-column: 2 ;
    grid-row: 1 ;
}

.b img {width:100%;}
.c {
    grid-column:3 ;
    grid-row: 1 ;
}
.d {
    grid-column: 4;
    grid-row: 1;

}
.e {
    grid-column: 2;
justify-content: center;

}

.e img {width:100%;}

<body>

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .gridwrapper {
        margin:0 auto;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background-color: #fff;
        color: #444;
        height:100vh;

    }

    .box {
        background-color: #444;
        color: #fff;

        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column:1;
        grid-row: 1 /span 2;
        background-image: url("https://i.imgur.com/Qn8gJmh.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }

    .box:not(.a) {
    display:flex;
    justify-content:center;
}

.box:not(.a) img {
    display:block;
    width:100%;
}

<div class="gridwrapper">
    <div class="box a"><img src="https://images.unsplash.com/photo-1531923261682-53ef27714b13?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=95fb28afe334178bb4af65a319b5a96a"></div>
    <div class="box b"><img src="https://images.unsplash.com/photo-1516545952257-5fec7b2f00c0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=61bf30ca75018d66f24307360036754b"></div>
    <div class="box c"><img src="https://images.unsplash.com/photo-1502758594676-9d84cb9bc2e6?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=632e92e24c4d13cc39a398049ed70350"></div>
    <div class="box d"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box e"><img src="https://images.unsplash.com/photo-1504716475170-e69bea1ef6b3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b6df4e2fa5314bc9fc9a58def94f3086"></div>
    <div class="box f"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box g"><img src="https://images.unsplash.com/photo-1520880616730-aedffe34fdab?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fac5f554f014db0556d0ce3d4220a761"></div>
</div>

body {
  height: 200vh;
}

.gridwrapper {
  background-color: #ccc;
  display: grid;
  grid-template-columns: 300px repeat(auto-fill, minmax(50px, 200px));
  grid-template-rows: repeat(4, 200px);
  grid-gap: 10px;
  grid-auto-flow: row;
  justify-content: center;
}

.box {
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-content: center;
}

.a {
  grid-row: span 2;
}

img {
   width: 100%;
   height: auto;

}