css - 我如何使用 css 使我的 Grid 模板适合列

Question

这是我的 css 代码，这就是我的图像的显示方式 这是我的 html 代码，它显示了所有内容，但还有一个 Car 组件，其中包含更多代码

   <section className="Carslist">
      <div className="Carslist-center">
        {cars.map(item => {
          return <Car key={item.id} car={item} />;
        })}
      </div>
    </section>








.Carslist {
  padding: 5rem 0;
}
.Carslist-center {
  width: 100vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-row-gap: 2rem;
  grid-column-gap: 30px;
}

@media screen and (min-width: 776px) {
  .Carslist-center {
    width: 90vw;
  }
}
@media screen and (min-width: 992px) {
  .Carslist-center {
    width: 95vw;
    max-width: 1170px;
  }
}

我想让每张图片完全适合网格

标签： cssreactjs

Answer 1

请向我们展示您的 HTML 代码，但此 CSS 代码应该可以工作

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