Html 如何使内容与网格单元格/div完美匹配？

所以，我不知道为什么我在确保内容符合其分区方面遇到了如此大的困难。以下是我到目前为止的情况

<div id="container" class="charts-wrapper chart-container">  
  <div class="main-chart-container ">
    <img src = "https://picsum.photos/id/288/300/200" class = 'img-responsive mainn-chart'/>
  </div> 
  <div class="minor-chart-container">
      <img src = "https://picsum.photos/id/237/300/200" class = 'img-responsive mainn-chart'/>
  </div>
</div>

css中有很多膨胀的代码抱歉，我知道-这是我实验的结果

这里有一些图片来描述我正在努力实现的目标。

---

正如您在这里看到的，当小部件展开时，网格会按预期展开，并且图像确实具有调整大小的功能，但是我希望确保图像能够扩展到网格单元的大小。我将如何更改CSS来实现这一点？背景图像在这里对我没有帮助，因为该图像实际上只是我想要显示的实际内容的占位符，如果有帮助的话，它们都是来自devextreme的dx图表。我们不相信这是一个devextreme图表问题，因为当它是小部件中唯一的图表时，它可以很好地扩展

您可以使用

高度

+

宽度

来代替

对齐自：拉伸

，最终避免拉伸，而使用剪裁来保持图像的像素比

例如：

/*删除了一些样式以提高可读性*/
.图表包装{
显示：网格；
位置：固定；
排名：0；
右：0；
左：0；
底部：0；
网格模板柱：35fr 10fr；
柱间距：var（--dds-间距-m）；
}
.主图表容器{
边框：5px纯红；
背景颜色：绿色；
不透明度：40%；
}
/*对于两个图像*/
.chart容器.main图表{
身高：100%；
宽度：100%；
对象匹配：覆盖；
对象位置：/*请参见https://developer.mozilla.org/en-US/docs/Web/CSS/object-position */ ;
}
.次要图表容器{
边框：5px纯红；
不透明度：40%；
}

您可以使用此代码

正文{
保证金：0；
填充：0；
背景色：#ffff00；
} 
.图表包装{
显示：网格；
位置：固定；
右：0；
左：0；
底部：0；
网格模板柱：35fr 10fr；
柱间距：var（--dds-间距-m）；
对齐项目：拉伸；
对齐内容：拉伸；
高度：500px；
背景颜色：黄色；
不透明度：80%；
宽度：100%；
}
.主图表容器{
边框：5px纯红；
网格柱：1；
显示器：flex；
调整项目：灵活启动；
调整内容：灵活启动；
高度：自动；
宽度：100%；
背景颜色：绿色；
不透明度：40%；
}
.main图表容器.main图表{
宽度：100%；
高度：490px；
}
.次要图表容器{
边框：5px纯红；
网格柱：2；
位置：绝对位置；
显示器：flex；
排名：0；
右：0；
底部：0；
高度：自动；
宽度：90%；
背景颜色：蓝色；
不透明度：40%；
}
.次要图表容器img{
宽度：100%；
}

.charts-wrapper{
    display: grid;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    grid-template-columns: 35fr 10fr;
    column-gap: var(--dds-spacing-m);
    align-items: stretch;
    align-content: stretch; 
    height:100%;
    background-color:yellow;
    opacity:80%;
}
.main-chart-container{
    border: 5px solid red;
    grid-column: 1;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    height: 100%;
    width: 100%;
    background-color:green;
    opacity: 40%;
}

.main-chart-container .mainn-chart{
    align-self:stretch;
}

.minor-chart-container{
    border: 5px solid red;
    grid-column: 2;
    // position: absolute;
    display:flex;
    top: 0;
    left: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    // background-color:blue;
    opacity: 40%;
}