响应式图片布局：Flexbox与width: 100%实现图片缩放与行内显示

<section id="Description" class="D">
  <div class="sub-description">
    <p>Hi, I'm My name here.</p>
    <p>
      As Software Engineer, I am a passionate Software Engineer, and I am
      skilled in HTML5, CSS3, JavaScript and React.
    </p>
  </div>
  <div class="container">
    <div class="box">
        <div class="imgBox">
            <img src="img/HTML5_Logo.png" alt="HTML5 Logo">
        </div>
        <div>
            <h2>HTML5</h2>
            <p>前端核心标记语言。</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/css3_Logo.png" alt="CSS3 Logo">
        </div>
        <div>
            <h2>CSS3</h2>
            <p>网页样式设计语言。</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/Javascript_Logo.png" alt="JavaScript Logo">
        </div>
        <div>
            <h2>JavaScript</h2>
            <p>实现交互的脚本语言。</p>
        </div>
    </div>
  </div>
</section>

section {
  padding: 150px;
  margin: 0;
  box-sizing: border-box;
  font-family: 'montserrat', sans-serif;
}

/* Flexbox容器设置 */
.container {
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 可选：水平居中对齐Flex项目 */
  align-items: flex-start; /* 可选：垂直顶部对齐Flex项目 */
  gap: 20px; /* 定义Flex项目之间的间距 */
  /* 如果希望项目在空间不足时换行，可以添加 flex-wrap: wrap; */
  /* flex-wrap: wrap; */
  width: 100%; /* 确保容器占据可用宽度 */
  max-width: 1200px; /* 限制容器最大宽度，保持布局美观 */
  margin: 0 auto; /* 容器居中显示 */
}

/* Flex项目（每个图片卡片） */
.container .box {
  position: relative;
  flex: 1; /* 让每个box平分可用空间 */
  min-width: 250px; /* 设定每个box的最小宽度，防止过度缩小 */
  max-width: 350px; /* 设定每个box的最大宽度 */
  height: auto; /* 高度自适应内容 */
  overflow: hidden; /* 确保内容不会溢出 */
  border: 1px solid #eee; /* 示例边框 */
  border-radius: 8px; /* 示例圆角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 示例阴影 */
  transition: transform 0.3s ease; /* 为悬停效果准备的过渡 */
  padding: 15px; /* 内部填充 */
  text-align: center; /* 文本居中 */
}

/* 悬停效果（为后续实现做准备） */
.container .box:hover {
  transform: translateY(-5px); /* 悬停时上浮效果 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 图片容器 */
.container .box .imgBox {
  width: 100%; /* 确保图片容器占据其父box的全部宽度 */
  height: 150px; /* 固定图片容器的高度，或者使用 aspect-ratio */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* 图片样式 */
.container .box .imgBox img {
  width: 100%; /* 关键：图片宽度与其父容器imgBox保持一致 */
  height: 100%; /* 关键：图片高度与其父容器imgBox保持一致 */
  object-fit: contain; /* 确保图片完整显示，不裁剪，但可能留白 */
  /* object-fit: cover; 也可以尝试，图片会填充整个空间，但可能裁剪 */
  display: block; /* 移除图片底部可能出现的额外空白 */
}

/* 标题和段落样式 */
.container .box h2 {
  font-size: 1.5em;
  margin-bottom: 5px;
  color: #333;
}

.container .box p {
  font-size: 0.9em;
  color: #666;
}