如何让图片在类容器内无失真铺满无间隙，Flexbox实现及.portof高度控制

完全可以使用Flexbox实现所有需求，无需修改原有HTML结构，仅调整CSS即可，修改后的完整CSS如下：

/* 全局样式重置，避免默认边距导致滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow: hidden;
  height: 100vh;
}

.Gallery{
  width: 80%;
  padding: 2% 0 0 0;
  text-align: center;
  margin: auto;
}
.Gallery h1{
  font-size: 30px;
  font-weight: 800;
  color: #87CEEB;
}
.Gallery p{
  padding-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 30;
  color: #000;
  line-height: 30px;
  font-size: 20px;
}

.portof{
  width: 100%;
  max-height: 65vh; /* 控制.portof最大高度不超过视口的65%，避免过高 */
  text-align: center;
  background-image: url(img/slider_2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: multiply;
  /* 调整clip-path参数，压缩上下留白占比，进一步控制高度 */
  clip-path: polygon(51% 10%, 100% 5%, 100% 95%, 51% 98%, 0 95%, 0 5%);
}

.wrapper {
  padding: 4% 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* 彻底消除图片容器之间的所有空隙 */
}

.container {
  flex: 0 0 20%; /* 每行固定展示5张图片，宽度占比20% */
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心属性：保持图片原始比例铺满容器，超出部分自动裁剪，不会失真 */
  display: block; /* 消除图片自带的基线空白 */
}

.container:hover{
  background-color: rosybrown;
}

关键配置说明 #

• object-fit: cover：保证图片铺满容器的同时不会拉伸变形，自动适配容器尺寸裁剪多余内容
• Flex布局的gap:0：彻底清除元素之间的默认边距，不需要再用font-size:0这类hack方案
• 全局overflow: hidden+.portof的max-height限制：确保页面不会出现滚动条，同时.portof高度不会超出阈值
• box-sizing: border-box：所有元素的内边距、边框都不会额外撑大容器尺寸，避免布局溢出

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