如何使内容完全适合网格单元格/div？答案

【问题标题】：How do I make content fit the grid cells/div perfectly?如何使内容完全适合网格单元格/div？
【发布时间】：2019-10-02 16:34:15
【问题描述】：

所以我不知道为什么我在确保内容适合其 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>

请注意，背景图像之类的解决方案将不适用，因为它们实际上只是我正在研究的其他组件代码的占位符。

.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%;
}

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

这里有一些图片来描述我想要完成的事情。Widget1 Expanded Widget 正如您在此处看到的，当小部件展开时，网格会按预期展开，并且图像确实具有调整大小的功能，但我想确保图像展开到网格单元格的大小。我将如何更改我的 CSS 来实现这一点？背景图像在这里对我没有帮助，因为图像实际上只是我想要显示的实际内容的占位符，如果有帮助，它们都是来自 devextreme 的 dx 图表。我们不认为这是一个 devextreme 图表问题，因为当它是小部件中唯一的图表时，它会很好地扩展。

【问题讨论】：

标签： html css responsive-design css-grid devextreme

【解决方案1】：

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
            background-color: #ffff00;
        } 
        .charts-wrapper{
            display: grid;
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            grid-template-columns: 35fr 10fr;
            column-gap: var(--dds-spacing-m);
            align-items: stretch;
            align-content: stretch; 
            height:500px;
            background-color:yellow;
            opacity:80%;
            width: 100%;
        }
        .main-chart-container{
            border: 5px solid red;
            grid-column: 1;
            display:flex;
            align-items:flex-start;
            align-content:flex-start;
            height: auto;
            width: 100%;
            background-color:green;
            opacity: 40%;
        }
        .main-chart-container .mainn-chart{
            width: 100%;
            height: 490px;
        }
        .minor-chart-container{
            border: 5px solid red;
            grid-column: 2;
            position: absolute;
            display:flex;
            top: 0;
            right: 0;
            bottom: 0;
            height: auto;
            width: 90%;
            background-color:blue;
            opacity: 40%;
        }
        .minor-chart-container img{
            width: 100%;
        }

    <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>

【讨论】：

【解决方案2】：

您可以使用height + width 代替align-self:stretched 并最终使用object-fit 来避免拉伸但剪裁以保持图像的像素比例。

示例：

/* removed some style for readability */
.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);
}
.main-chart-container {
  border: 5px solid red;
  background-color: green;
  opacity: 40%;
}
/* for both image */
.chart-container .mainn-chart {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position:/* see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position */ ;
}
.minor-chart-container {
  border: 5px solid red;
  opacity: 40%;
}

<div id="container" class="charts-wrapper chart-container" style="--dds-spacing-m :1em">
  <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>

【讨论】：