css网格内的对象拟合

Question

我根本无法使object-fit: cover在我的网格中工作。该图像显示在容器的顶部，并且始终以100％的宽度（及其正常的适当高度）显示，导致实际上并未覆盖整个容器的高度，因为我可以看到底部的底层红色背景。我要去哪里错了？

.mygrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "w-name w-name w-name" "w-img1  w-info  w-img2" "w-img1 w-price  w-img2";
}

.w-img1 {
  background-color: #d8323f;
  grid-area: w-img1;
}

img {
  width: 100%;
  height: auto;
}

<div>
  <section class="mygrid ">
    <div class="w-name">
      The title
    </div>
    <div class="w-img1">
      <img style="object-fit:cover" src="imgs/Sample.jpg">
    </div>

Answer 1

为了使height:100%起作用，您还需要使用object-fit

.mygrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "w-name w-name w-name" "w-img1  w-info  w-img2" "w-img1 w-price  w-img2";
}

.w-img1 {
  background-color: #d8323f;
  grid-area: w-img1;
  border: green solid
}

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

<div>
  <section class="mygrid ">
    <div class="w-name">
      The title
    </div>
    <div class="w-img1">
      <img src="https://placehold.it/500x200">
    </div>