Question

.container1 {
  width: 100%;
  overflow:hidden;
  margin: 0.2em auto;
  display:grid;
  grid-template-columns:25% 25% 25% 25% ;
  grid-template-rows:25% 25% 25%; 
  grid-template-areas:"image1 image2 image3 image3"
                       "image4 iamge4 image5 image6"
                       "image7 image8 image8  image6"
}
   
.image1 {
   grid-area: image1;
   /*
   grid-column-start:1;
   grid-column-end: 2;
  */
   border:0.75em black solid;
   filter:grayscale(100%);
   overflow:hidden;
   object-fit: contain;
 }

<div class="container1">

<div class="image4">
  <img src="image/image4.jpg" alt="journey map" />
</div>
<div class="image5">
  <img src="image/image5.jpg" alt="wireframing-low fidility" />
</div>

我正在尝试将图像放入网格区域，我尝试了对象：包含，覆盖..几乎所有东西，但它没有发生。

更新：删除了grid-column-start和grid-colum-end

Answer 1

基于您提供的代码和您的评论，我做了一个小提琴，可能会或可能不会解决您的问题：

HTML：

<div class="container1">
  <div class="image4 image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Google-favicon-2015.png/150px-Google-favicon-2015.png" alt="journey map" />
  </div>
</div>

CSS

.container1 {
  width: 100%;
  overflow:hidden;
  margin: 0.2em auto;
  display:grid;
  grid-template-columns:25% 25% 25% 25% ;
  grid-template-rows:25% 25% 25%; 
  grid-template-areas:"image1 image2 image3 image3"
                       "image4 iamge4 image5 image6"
                       "image7 image8 image8  image6"
}

.image {
   grid-area: image1;
   /*
   grid-column-start:1;
   grid-column-end: 2;
  */
   border:0.75em black solid;
   filter:grayscale(100%);
   overflow:hidden;
   object-fit: contain;
 } 

 .image img {
   width: 100%;
 }

https://jsfiddle.net/6xspyrs7/1/

通过在img标记本身上添加CSS，它会根据容器的大小调整图像大小

如何在CSS网格中的网格区域内填充图像。下面是代码

1 个答案: