img div不适合css网格单元格

Question

我正试图整理一个css网格，以适应这个来自免费代码阵营的致敬页面项目中的img。我想怎么做就怎么做，但似乎无法将图像完美地放在每个单元格中。其中一些没有填满整个单元格，另一些则超过了它。这是代码：

.img-div-container {
display: grid;
grid-template-columns: 50% 25% 25%;
grid template-rows: 5px 5px;
margin-left: 100px;
margin-right: 100px;
grid-column-gap: 5px;
align-content: stretch;
justify-content: stretch;
background: hsla(199, 19%, 62%, 0.21);
border: 2px outset hsla(199, 19%, 62%, 0.21)
}
.image-bigger {
grid-column: 1/2;
grid-row: 1/3;
place-self: stretch;
;
}
.image-wider {
grid-column: 2/4;
grid-row: 2/3;
place-self: end stretch;
width: 95%;
}
.image-normal,
.image-bigger,
{
place-self: stretch;
justify-self: flex-start;
}
img {
width: 100%;
height: 87%;
}
.normal {
width: 100%;
height: auto;
}

<div class="img-div-container">
<div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>
<div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
<div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
<div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>
</div>

很抱歉，在尝试修复此问题时，代码有点乱。

Answer 1

我所做的最大更改是将属性object-fit添加到您的图像中：

img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp

对于剩下的，我只评论了一些我认为对这项工作没有必要的规则：

.img-div-container {
display: grid;
grid-template-columns: 50% 25% 25%;
/*grid-template-rows: 5px 5px;*/
margin-left: 100px;
margin-right: 100px;
grid-gap: 5px;
/*align-content: stretch;
justify-content: stretch;*/
background: hsla(199, 19%, 62%, 0.21);
border: 2px outset hsla(199, 19%, 62%, 0.21);
overflow:hidden;
}
.image-bigger {
grid-column: 1/2;
grid-row: 1/3;
/*place-self: stretch;*/
}
.image-wider {
grid-column: 2/4;
grid-row: 2/3;
/*place-self: end stretch;
width: 95%;*/
}
/*.image-normal,
.image-bigger,
{
place-self: stretch;
justify-self: flex-start;
}*/
img {
width: 100%;
height: 100%;
display:block;
object-fit: cover;
}
/*.normal {
width: 100%;
height: auto;
}*/

<div class="img-div-container">
<div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>
<div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
<div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
<div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>
</div>

Answer 2

尝试给你的网格模板区域

然后将网格区域相应地分配给每个div，

例如：

HTML

<div class="grid-container">
<div class="verticalphoto"></div>
<div class="photo1"></div>
<div class="photo2"></div>
</div>

CSS

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 
"verticalphoto photo1 . ." "verticalphoto photo2 . ." ". . . .";
}
.verticalphoto { grid-area: verticalphoto; }
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }

要适合图像，请尝试

img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

Answer 3

您正在使用

display: grid;
grid-template-columns: 50% 25% 25%;
grid template-rows: 5px 5px;

其看起来是连贯的3列和2行。

我会使用

display:grid;
grid-template-columns: 50% 25% 25%;
grid-template-rows:1fr 1fr;

以避免固定值，并让浏览器管理行的大小。

然后，你使用

.image-wider {
grid-column: 2/4;
grid-row: 2/3;
}

如果区域描述了4列和3行，那么它将非常适合grid-template-areas，而这里的情况显然不是这样(您设置了3列和2行(。

我可以安全地在这里使用grid-template-columns/grid-template-rows:

.image-wider {
grid-column: 2 / span 2; /* set in the second column and span through 2 columns */
grid-row: 2;/* not really needed here since it is already standing in the last empty grid cell avalaible */
}

只告诉有多少个单元格要跨越，而不是告诉从单元格2到单元格4(未设置grid-template-areas！(

---

使用flex或grid时，如果您不熟悉它，请将其分成尽可能简单的步骤。

你可以通过一些额外的类来构建你的网格布局，让它一开始更容易阅读，以后更容易调整。

CCD_ 8在我看来也更像是用于前2个小网格的CCD_。

---

代码示例被分解为多个片段，以显示在哪里调度每个容器；(

.grid {
display:grid;
margin:0 100px;
grid-template-columns: 50% 25% 25%;
grid-template-rows:1fr 1fr;
}
.c1 {
grid-column:1;
}
.c2 {
grid-column:2;a
}
.c3 {
grid-column:3;
}
.c23 {
grid-column:2/ span 3;
}
.r1 {
grid-row:1;
}
.r2 {
grid-row:2;
}
.r12 {
grid-row:1/ span2;
}
.image-normal {
margin-bottom:5px;
}
/* whatever size is needed , object-fit can also be used to clip and avoid pixel stretching */
img {
height:100%;
width:100%;
}

<div class="img-div-container grid">
<div class="image-bigger c1 r12">
<img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg">

</div>
<div class="image-normal c2 r1">
<img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg">

</div>
<div class="image-normal c3 r1">
<img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg">

</div>
<div class="image-wider c23 r2">
<img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg">

</div>
</div>

看起来您混合了grid-template-areas和grid-template-rows(-columns(来填充网格。