网格元素的高度受内容图像宽度百分比的影响

问题描述

编辑：让我澄清一下！我不是在问如何通过限制容器的大小来防止内容流出，我要寻找的是如何根据容器适当地调整内容的大小以及为什么带有背景图像的div设置为覆盖作品，而img元素则不包含。

我正在尝试使用页眉，侧边栏，内容和页脚实现标准的网格布局，其中content元素作为子元素仅具有一个图像，该图像应填充整个剩余空间。我以为申请了

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

足以获得所需的结果，但出乎意料地增加了内容元素的高度。更荒谬的是，无论我减少多少图像高度，只要以百分比为单位进行测量，容器的高度就取决于图像的宽度。例如，请参见下面的笔（或查看下面的代码片段，但是问题在笔中更为明显，因为在那里并排可见这些框）。
https://codepen.io/Isti115/pen/vYGRNpg
尝试调整.a img { widht: 100%; }，看看它如何影响整体高度。

.container {
  display: inline-grid;
  
  width: 400px;
  height: 300px;
  
  margin: 50px;
  
  grid-template-rows: 75px 1fr 50px;
/*   grid-template-rows: 75px minmax(0,1fr) 50px; */
  grid-template-columns: 100px 1fr;
  
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header {
  grid-area: header;
  background-color: red;
}

.sidebar {
  grid-area: sidebar;
  background-color: yellow;
}

.content {
  grid-area: content;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
}

.a .content {
/*   min-height: 0; */
}

.a img {
  width: 100%;
  height: 20%;
/*   object-fit: cover; */
/*   height: 100%; */
}

.b img {
  width: 100%;
  height: 50px;
/*   object-fit: cover; */
}

.c .placeholder {
  width: 100%;
  height: 100%;
  
/*   background-color: purple; */
  background: url("http://lorempixel.com/200/150/cats");
  background-size: cover;
}

<div class="container a">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <img src="http://lorempixel.com/200/150/cats">
  </div>
  <div class="footer"></div>
</div>

<div class="container b">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <img src="http://lorempixel.com/200/150/cats">
  </div>
  <div class="footer"></div>
</div>

<div class="container c">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <div class="placeholder"></div>
  </div>
  <div class="footer"></div>
</div>

此后，我已经找到了通过添加min-height: 0或使用minmax(0,1fr)的解决方案，但是我不考虑那些理想的解决方案，因为我不明白为什么我不能简单地采用其余的解决方案分配给内容div元素的空间，并在其中放置一个图像，该图像完全填充了该图像，而没有扩大容器的大小。例如，使用简单的div代替图像并为其提供背景，可以按预期完美地工作。

ps .：我知道这听起来可能与通过max-height: 100%回答的其他一些问题相似，但是我认为我想探讨一个更复杂的潜在问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grid-layout html