gpt4 book ai didi

html - 如何使内容完全适合网格单元格/div?

转载 作者:行者123 更新时间:2023-11-27 23:17:14 25 4
gpt4 key购买 nike

所以我不知道为什么我在确保内容适合其 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 图表问题,因为当它是小部件中唯一的图表时它可以很好地扩展。

最佳答案

您可以使用此代码

        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>

关于html - 如何使内容完全适合网格单元格/div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58205689/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com