使用Flexbox实现图片尺寸调整与横向布局

.container {
    display: flex; /* 启用Flexbox布局，子元素将横向排列 */
    gap: 20px;     /* 为子元素之间设置20px的间距 */
    width: 100%;   /* 容器宽度，可以设置为固定值或百分比 */
    max-width: 1100px; /* 限制容器的最大宽度 */
    margin: 0 auto; /* 容器居中显示 */
    justify-content: center; /* 子元素在主轴上居中对齐 */
    /* flex-wrap: nowrap; */ /* 默认值，确保子元素不换行 */
}

.container .box {
    /* 定义每个图片容器的宽度，这将决定内部图片的最大宽度 */
    width: 300px; /* 示例：每个图片容器宽度为300px */
    flex-shrink: 0; /* 防止在空间不足时缩小，保持固定宽度 */
    box-sizing: border-box; /* 确保内边距和边框不增加宽度 */
}

.container .box img {
    width: 100%; /* 图片将占据其父容器（.imgBox 或 .box）的全部宽度 */
    height: auto; /* 保持图片原始宽高比，避免变形 */
    display: block; /* 移除图片底部可能存在的额外空间 */
    /* object-fit: cover; */ /* 如果需要图片裁剪以填充容器，可以启用 */
}

<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"> <!-- 注意：原代码中的 .conatiner 已修正为 .container -->
    <div class="box">
        <div class="imgBox">
            <img src="img/HTML5_Logo.png" alt="HTML5 Logo">
        </div>
        <div>
            <h2>Image Title</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/css3_Logo.png" alt="CSS3 Logo">
        </div>
        <div>
            <h2>Image Title</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/Javascript_Logo.png" alt="JavaScript Logo">
        </div>
        <div>
            <h2>Image Title</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
  </div>
</section>

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

.container {
    display: flex; /* 启用Flexbox布局 */
    gap: 20px; /* 图片容器之间的间距 */
    width: 100%; /* 容器宽度，可以设置为固定值或百分比 */
    max-width: 1100px; /* 限制最大宽度，以防止图片过大 */
    margin: 0 auto; /* 居中显示 */
    justify-content: center; /* 子元素在主轴上居中对齐 */
    /* flex-wrap: nowrap; */ /* 默认值，确保子元素不换行 */
}

.container .box {
    position: relative;
    width: 300px; /* 控制每个图片容器的宽度，这将决定内部图片的最大宽度 */
    /* height: 400px; */ /* 如果内容高度不固定，建议移除固定高度，让内容撑开 */
    overflow: hidden; /* 隐藏超出部分 */
    transition: 0.5s; /* 为后续的悬停效果准备 */
    box-sizing: border-box; /* 确保内边距和边框不增加宽度 */
    flex-shrink: 0; /* 确保flex项不会缩小，保持其指定的宽度 */
}

.container .box .imgBox {
    /* 可以为图片容器设置特定高度，如果需要统一图片区域大小 */
    /* height: 200px; */
    /* overflow: hidden; */
    display: flex; /* 如果需要图片在imgBox内居中 */
    justify-content: center;
    align-items: center;
}

.container .box img {
    width: 100%; /* 图片占据其父容器 .imgBox 的全部宽度 */
    height: auto; /* 保持图片原始宽高比 */
    display: block; /* 移除图片底部默认的空白间隙 */
    /* object-fit: cover; */ /* 如果需要图片裁剪以填充容器，可以启用 */
}

/* 示例：悬停效果 */
.container .box:hover {
    transform: translateY(-10px); /* 向上浮动 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 添加阴影 */
}