如何实现三张图片并排铺满picture-container父容器且尺寸保持一致

你只需要修改CSS代码即可，HTML代码无需调整，修改后的完整CSS如下：

* {
  /* 全局设置边框算入元素宽高，保证边框不会撑大容器 */
  box-sizing: border-box;
}
.picture-container {
  position: absolute;
  top: 10%; 
  width: 90%;
  height: 70%;
  left: 5%;
  border-style: dotted;
  /* 避免子元素溢出 */
  overflow: hidden;
}

.picture-container .img-container.three-image {
  height: 100%;
  width: 100%;
  /* 如果需要图片之间保留间隙可以调整gap数值，不需要留间隙设为0即可 */
  gap: 0;
  display: grid;
  /* 三列等分宽度 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 子元素自动铺满单元格宽高 */
  align-items: stretch;
  justify-items: stretch;
}

.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  transition: 0.5s;
  /* 宽高100%撑满grid单元格 */
  width: 100%;
  height: 100%;
  /* 不裁剪，允许拉伸完全填充容器 */
  object-fit: fill;
}

核心修改说明 #

• 清理了原代码中大量重复、冲突的宽高定义，避免样式优先级覆盖导致的布局异常
• 把Grid布局的列定义改为1fr 1fr 1fr实现三列等分，搭配align-items: stretch、justify-items: stretch让每个图片容器自动铺满单元格，实现三张图片整体占满父容器的宽高
• 全局添加box-sizing: border-box保证图片的边框、内边距都算在宽高范围内，不会撑破容器导致边框显示不全
• 图片的object-fit改为fill，完全匹配需求：不裁剪图片、允许拉伸适配容器尺寸，所有图片都会和单元格尺寸保持一致，不受原图比例影响

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