如何避免div内图片拉伸？响应式Header图片比例保持问题

问题根源 #

你的header是Flex容器，默认的align-items: stretch会强制所有子元素拉伸至容器内最高元素的高度。这就导致Logo图片为了填满容器高度，在维持max-width的同时被拉伸，破坏了宽高比。

解决方案 #

通过调整Flex对齐规则并明确图片的尺寸约束，就能让Logo保持宽高比自适应容器：

修改后的CSS代码

header {
  background-color: #030052;
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 让所有子元素垂直居中，避免拉伸 */
}

.logo {
  max-width: 22%;
  height: auto; /* 强制高度随宽度自动计算，保持宽高比 */
  max-height: 100%; /* 可选：限制图片最大高度不超出Header容器 */
}

nav {
  width: 23%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

关键调整说明

1. align-items: center：给header添加这个属性，取消默认的拉伸行为，让所有子元素垂直居中，Logo不再被强制拉满容器高度。
2. height: auto：显式声明图片高度自适应宽度，确保始终遵循原始宽高比。
3. max-height: 100%（可选）：如果希望Header高度被其他元素限制时，Logo自动缩小以适配容器高度，添加这行即可避免图片超出容器范围。

如果只想让Logo单独居中，不影响其他子元素，也可以给.logo单独设置align-self: center，而不修改header的align-items：

.logo {
  max-width: 22%;
  height: auto;
  align-self: center;
}

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