如何实现图片尺寸统一及响应式适配？图片博客开发技术问询

先看你代码里的核心问题：你写了两个img选择器，后面的width:40%; height:auto直接覆盖了前面的100px宽高规则；再加上图片本身比例不同，只设置宽度自适应会导致高度参差不齐，这就是你觉得尺寸不一致的原因。

给你几个实用的解决方案：

方案1：统一显示区域，保留图片原比例（推荐） #

用object-fit属性让图片在固定尺寸的容器内自适应，既保持比例又统一显示大小，同时支持响应式布局：

修改后的CSS代码：

body {
  margin: 0;
  background-color: #212529;
  /* 网格布局让图片自动排列，响应式自动换行 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

img {
  width: 100%;
  height: 250px; /* 统一显示高度 */
  object-fit: cover; /* 裁剪多余部分，保持图片比例不变形 */
  border-radius: 8px; /* 可选，美化边角 */
}

nav {
  font-size: larger;
  font-weight: bolder;
  font-family: 'Gill Sans';
  margin-left: 20px;
  border-bottom: 2px solid white;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  grid-column: 1 / -1; /* 导航栏占满整行 */
}

方案2：强制统一尺寸（会拉伸/压缩图片，不推荐） #

如果不在乎图片比例变形，可以直接固定宽高，同时添加响应式限制：

img {
  width: 40%;
  height: 300px;
  margin: 20px;
  max-width: 400px; /* 限制最大宽度，避免大屏下图片过宽 */
}

方案3：仅统一宽度，高度自适应（保留原比例） #

想保留图片原比例，只让宽度一致的话，用弹性布局实现自动换行：

body {
  margin: 0;
  background-color: #212529;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

img {
  width: calc(50% - 20px); /* 每行2张，减去间距 */
  height: auto;
}

/* 小屏适配：每行1张 */
@media (max-width: 768px) {
  img {
    width: 100%;
  }
}

nav {
  font-size: larger;
  font-weight: bolder;
  font-family: 'Gill Sans';
  margin-left: 20px;
  border-bottom: 2px solid white;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: white;
}

关键说明 #

• object-fit: cover：核心是在固定容器内保持图片比例，裁剪多余部分，不会让图片变形
• 网格/弹性布局：替代手动设置margin，让图片自动排列，响应式场景下自动调整列数
• 媒体查询：针对移动端小屏幕优化布局，提升浏览体验

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