如何让Electron应用中网格内的图片居中且尺寸统一？

我正在使用Electron为Pentel制作一个模拟桌面应用，已将若干钢笔图片放入网格布局中，当前应用效果如下：

现有代码：

CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.nav-bar {
  height: 10vh;
  background-color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  list-style-type: none;
  border-bottom-right-radius: 0.3em;
}


.nav-bar .logo {
  height: 5vh;
  width: auto;
  object-fit: contain;
  margin-left: 1.5rem;
}

.pens-images {
  margin-top: 2.5rem;
  max-width: 70%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5em;
}

HTML代码 #

<body>
    <nav class="nav-bar">
      <a href="#">
        <img src="./images/pentel_logo.png" class="logo">
      </a>
    </nav>
    
      <div class="pens-images">
        <img src="./images/black-energel-rtx-refillable-liquid-gel-pen.png" alt="black EnerGel RTX refillable liquid gel pen">
        <img src="./images/blue-ballpoint-07-clear-barrel.png" alt="blue ballpoint 0.7 clear barell pen">
        <img src="./images/EnerGel-X-retractable-gel-pen.png" alt="EnerGel-X retractable gel pen">
        <img src="./images/tradio-fountaion-blue-ink-white-barrel-pen.png" alt="tradio fountain blue ink white barrel pen">
      </div>
    
  </body>

需要实现两个需求：

• 将网格居中显示
• 让所有图片拥有相同的宽高

1. 实现网格居中 #

修改.pens-images的margin属性，用margin: auto实现水平居中：

.pens-images {
  margin: 2.5rem auto 0; /* 替换原margin-top，实现水平居中 */
  max-width: 70%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5em;
}

2. 统一图片宽高 #

给网格内的图片添加尺寸控制规则，同时保证图片比例不变：

.pens-images img {
  width: 100%;
  height: 300px; /* 可根据需求调整高度值 */
  object-fit: contain; /* 保持图片原有比例，完整显示 */
  /* 若需要图片填充整个单元格，可改用 object-fit: cover; */
}

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.nav-bar {
  height: 10vh;
  background-color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  list-style-type: none;
  border-bottom-right-radius: 0.3em;
}


.nav-bar .logo {
  height: 5vh;
  width: auto;
  object-fit: contain;
  margin-left: 1.5rem;
}

.pens-images {
  margin: 2.5rem auto 0;
  max-width: 70%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5em;
}

.pens-images img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

关键说明 #

• 网格居中：margin: auto会让块级元素在父容器（这里是body）中自动分配左右边距，实现水平居中。
• 图片统一尺寸：width: 100%让图片占满网格单元格宽度，固定height保证所有图片高度一致；object-fit: contain避免图片拉伸变形，完整保留原有比例。

内容的提问来源于stack exchange，提问作者talopl