html - img div 不适合 CSS 网格单元格

Question

我正在尝试整理一个 css 网格以适合我在免费代码营的这个致敬页面项目上的 imgs。我设法按照自己的意愿制作了网格，但我似乎无法将图像完美地放入每个单元格中。其中一些没有填满整个单元格，而另一些则超出了它。这是代码：

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

很抱歉，在尝试解决此问题时代码有点混乱。

标签： htmlcssgrid-layoutcss-grid

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>