如何让CSS Grid中图片高度匹配内容自适应的网格行高度？

要让图片高度和DIV2自适应内容的高度保持一致，只需要调整图片的高度设置，让它完全填充所在的grid容器即可：

1. 移除图片的固定高度height:200px
2. 给图片设置height:100%，这样它会自动继承父容器.d3的高度——而.d3和.d2处于Grid布局的同一行，高度会自动匹配.d2的内容高度

修改后的完整代码如下：

CSS 代码 #

.parent{
    width:500px;
    padding:10px;
    background-color:grey;
    display:grid;
    grid-template-areas:
    "div1 div1"
    "div2 div3";
    grid-template-columns:auto 1fr;
    gap:10px;
}

.d1{
    grid-area:div1;
    background-color:pink;
}
.d2{
    grid-area:div2;
    background-color:beige;
}
.d2 p{
  margin:0;
}
.d3{
    grid-area:div3;
    background-color:aqua;
    display:flex;
    justify-content:flex-end;
}
.d3 img{
    background-color:aqua;
    height:100%; /* 关键修改：改为100%继承父容器高度 */
    aspect-ratio:1/1;
    object-fit:cover;
}

HTML 代码 #

<div class="parent">
  <div class="d1">DIV 1 Lorem ipsum dolor sit amet</div>
  <div class="d2">
    <p>DIV 2 Lorem ipsum</p>
    <p>DIV 2 Lorem ipsum</p>
    <p>DIV 2 Lorem ipsum</p>
    <p>DIV 2 Lorem ipsum</p>
  </div>
  <div class="d3"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg"></div>
</div>

这样调整后，不管DIV2的内容怎么变化，图片的高度都会自动和它保持一致，同时aspect-ratio:1/1保证图片是正方形，object-fit:cover避免图片变形。

内容的提问来源于stack exchange，提问作者Astw41