Javascript CSS网格中的图像赢得'；t将大小调整为最大大小

我正在尝试创建一个HTML模式，我想先在一个外部文件中创建基本HTML和CSS

最终输出应如下所示：

设计模拟

这里的目标是使小地图在保持纵横比的同时，根据模型的大小进行缩放。 这是为游戏世界的坦克和地图应始终尽可能大（没有削减任何部分的图像）

---

我的第一个想法是把地图作为背景

background-size: cover;
background-position: center;

这是我的第一个想法，因为我以前在另一个应用程序中使用过它，它工作正常。这里的问题是图像没有使用网格提供的所有空间

以图像为背景的网格视图

正文{
背景：#EBEBEB；
字体系列：无衬线；
颜色：#3434；
}
.modal_内容{
显示：网格；
网格模板列：1fr；
网格模板行：自动1fr；
网格模板区域：“模态单元标题”“模态单元内容”；
栅隙：25px；
}
.modal_标题{
背景：#ACACAC；
网格区域：modal_标题；
显示：网格；
网格模板列：1fr自动；
网格模板区域：“模式标题退出”；
填充：10px；
右边填充：25px；
}
.modal_标题{
网格区域：modal_标题；
自我辩护：中心；
自对准：居中；
}
.modal_closeBtn{
网格区域：出口；
自我辩护：正确；
自对准：居中；
字体大小：30px；
字体大小：粗体；
}
.模态单元体{
网格区域：模式内容；
显示：网格；
网格模板列：1fr自动；
网格模板行：自动；
网格模板区域：“模态单元战术模态单元细节”；
对齐项目：居中；
证明项目：中心；
栅隙：50px；
填充：15px；
}
.modal_img{
填充：50px；
网格区域：模态_策略；
背景：url（“http://placekitten.com/512/512");
背景尺寸：封面；
背景位置：中心；
}
.modal_详细信息{
字体大小：30px；
网格区域：模态_详细信息；
显示：网格；
栅隙：10px；
网格模板列：1fr；
网格模板行：1fr 1fr；
}

文件
&时代；
模态头
坦克


3x Progetto
5倍防守者
2x WZ-132

攻击者列表：


[名气]
[全方位]
[G_uug]

我认为可以通过向modal\u img类添加宽度和高度，并向其声明框大小样式来扩展背景图像的宽度

请参阅下面的更新代码：

正文{
背景：#EBEBEB；
字体系列：无衬线；
颜色：#3434；
}
.modal_内容{
显示：网格；
网格模板列：1fr；
网格模板行：自动1fr；
网格模板区域：“模态单元标题”“模态单元内容”；
栅隙：25px；
}
.modal_标题{
背景：#ACACAC；
网格区域：modal_标题；
显示：网格；
网格模板列：1fr自动；
网格模板区域：“模式标题退出”；
填充：10px；
右边填充：25px；
}
.modal_标题{
网格区域：modal_标题；
自我辩护：中心；
自对准：居中；
}
.modal_closeBtn{
网格区域：出口；
自我辩护：正确；
自对准：居中；
字体大小：30px；
字体大小：粗体；
}
.模态单元体{
网格区域：模式内容；
显示：网格；
网格模板列：1fr自动；
网格模板行：自动；
网格模板区域：“模态单元战术模态单元细节”；
对齐项目：居中；
证明项目：中心；
栅隙：50px；
填充：15px；
}
.modal_img{
填充：50px；
网格区域：模态_策略；
背景：url（“http://placekitten.com/512/512");
背景尺寸：封面；
背景位置：中心；
宽度：100%；
身高：100%；
背景重复：无重复；
框大小：边框框；
}
.modal_详细信息{
字体大小：30px；
网格区域：模态_详细信息；
显示：网格；
栅隙：10px；
网格模板列：1fr；
网格模板行：1fr 1fr；
}

文件
&时代；
模态头
坦克


3x Progetto
5倍防守者
2x WZ-132

攻击者列表：


[名气]
[全方位]
[G_uug]

解决方案是设置模式内容的高度，以便图像有空间填充。 你只需要缩放图像就可以了

.modal_img {
  grid-template-areas: tactic;
  margin: 25px;
  height: 100%;
  width: auto;
  background: url("http://placekitten.com/512/512");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

而且效果很好

然后只需添加其他元素，就可以得到最终结果

正文{
背景：#EBEBEB；
字体系列：无衬线；
颜色：#3434；
}
.modal_内容{
显示：网格；
高度：85vh；
网格模板列：1fr；
网格模板行：自动1fr；
网格模板区域：“模态单元标题”“模态单元内容”；
}
.modal_标题{
背景：#ACACAC；
网格区域：modal_标题；
显示：网格；
网格模板列：1fr自动；
网格模板区域：“模式标题退出”；
填充：10px；
右边填充：25px；
}
.modal_标题{
网格区域：modal_标题；
自我辩护：中心；
自对准：居中；
}
.modal_closeBtn{
网格区域：出口；
自我辩护：正确；
自对准：居中；
字体大小：30px；
字体大小：粗体；
}
.模态单元体{
网格模板柱：1fr 1fr；
网格模板区域：“战术细节”；
显示：网格；
身高：100%；
}
.modal_img{
网格模板区域：策略；
利润率：25px；
身高：100%；
宽度：自动；
背景：url（“http://placekitten.com/512/512");
背景尺寸：包含；
背格