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

lateinit vars

CSS

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

要适合图像，请尝试

.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; }

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时，如果您不熟悉它，则使其变得尽可能简单。

您可能已经开始使用一些额外的类来构建网格布局，以使其在开始时更容易阅读，在以后更易于调整。

在我看来，row-gap也更像前两个小网格的margin-bottom。

代码示例分为几部分，以显示将每个容器分派到哪里；）

.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）混合在一起以填充网格。

img div不适合CSS网格单元格

3 个答案: