html - 用图像拟合 css 网格单元

Question

我正在使用 css 网格进行登录页面布局。

我对页面的英雄部分有疑问。

其中一列中的图像不会像我希望的那样调整大小。我希望图片适合整个单元格并按比例调整单元格内的大小，同时不高于其左侧的内容（样机笔记本电脑和蓝色列）。

这是代码：

<div class="container">

      <section id="hero-section">
        <img class="hero-logo" src="img" alt="">
        <h1 class="hero-h1">bla bla</h1>
      </section>

      <section id="bg-section">
          <img class="bg-img" src="img" alt="Engineer wearing helmet">
      </section>

etc...
</div> 

所以容器设置为网格和图片

#bg-section {
  grid-area: 1 / 3 / 2 / 6;
  overflow: hidden;
}

.bg-img {
  width: 100%;
}

我尝试在图像上的 #bg-section 或 height: 100% 上进行 flex，图像填充了整个单元格，但图像不会以这种方式保持纵横比。

请帮忙

标签： htmlcss