CSS问题：图片高度无法随宽度等比例缩放

嘿，我来帮你搞定这个图片高度不听话的问题！你说设置了width: 50px搭配height: auto却没得到按比例自适应的效果，大概率是flex布局的默认行为在搞鬼，咱们一步步排查解决：

可能的问题根源 #

• Flex容器的默认拉伸行为：flex容器默认的align-items: stretch会让所有子元素（包括你的图片）拉伸到容器的高度，直接覆盖了你设置的height: auto；
• 容器高度继承失效：你的#floatingImageContainer设置了height: 100%，但如果它的父元素（body和html）没有设置高度，这个100%就没有参照值，会导致容器高度异常，间接影响图片；
• 图片被flex压缩：flex子元素默认flex-shrink: 1，当容器空间不足时，图片可能被强制压缩变形。

修复方案 #

试试修改你的CSS代码，加上这些关键属性：

/* 先给根元素设置高度，让容器的100%高度有参照 */
html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免不必要的滚动条 */
}

#floatingImageContainer {
  background-color: red;
  width: 75%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 关闭默认的拉伸行为，让子元素保持自身高度 */
  align-items: flex-start;
}

.floatingImage {
  width: 50px;
  height: auto;
  /* 禁止图片被flex压缩，保证尺寸比例不受影响 */
  flex-shrink: 0;
}

额外检查点 #

别忘了看看你的<img>标签有没有写内嵌的height属性（比如<img src="xxx" height="100">），如果有的话，要删掉这个属性，不然CSS的height: auto会被内嵌属性覆盖哦！

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