图片max-width属性引发异常：行内元素图片为何被缩小？

尽管两个元素均为行内元素，但图片却出现了缩小情况。为何为img设置max-width:100%会导致图片缩小，不设置该属性时图片却能保持合适宽度？据我理解，断字规则不会优先于图片宽度。当设置图片的max-width属性时，浏览器是否会认为我要求其将图片缩小以适配显式设置的容器宽度？

代码示例 #

CSS

.ola { display: flex; width: 110px; background: red; }
a { text-decoration: none; }
a:first-child { color: black; background: yellow; }
img { height: 30px; width: auto; max-width: 100%; }
a:nth-child(2) { color: yellow; background: black; font-size: 20px; }

HTML

<div class="ola">
  <a href="#">
    <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
  </a>
  <a href="#">HelloWorld</a>
</div>

这个问题的核心是Flex布局的空间分配规则和max-width属性对图片尺寸约束的交互作用，我来一步步拆解：

1. 先明确你的布局基础 #

你的.ola是一个固定宽度（110px）的Flex容器，里面的两个<a>标签是Flex子项。Flex子项默认带有flex-shrink:1属性——这意味着当容器总空间不足以放下所有子项时，子项会自动收缩来适配容器宽度。

2. 不设置max-width:100%时，图片为啥能保持宽度？ #

你给图片设置了height:30px; width:auto，这会让图片按照原始宽高比计算出一个固定的宽度值（比如如果你的图标是正方形，宽度就是30px）。

此时第一个<a>作为Flex子项，它的默认min-width:auto会等于内部内容的最小宽度（也就是图片的固定宽度）。Flex布局有个重要规则：子项不能收缩到小于自己的最小宽度，否则内容会溢出容器。

所以浏览器会优先保证图片的固定宽度，把剩余空间分给第二个<a>。如果第二个<a>里的文字（HelloWorld）在剩余空间里放不下，就会自动换行，从而图片始终保持它的固定宽度。

3. 添加max-width:100%后，图片为啥缩小了？ #

max-width:100%给图片加了一个关键约束：图片的最大宽度不能超过父元素（第一个<a>）的可用宽度，同时这也允许图片主动缩小以适配父元素的空间。

这时候第一个<a>的min-width不再被图片的固定宽度限制——因为图片可以缩小，Flex子项就可以收缩到更小的尺寸。浏览器为了让两个子项的总宽度刚好填满110px的容器（避免文字换行或者容器溢出），会让第一个<a>收缩，图片也跟着缩小到父元素的可用宽度，最终就出现了你看到的图片缩小的情况。

验证逻辑的小测试 #

你可以通过两个小测试来确认这个逻辑：

• 给第二个<a>加上white-space:nowrap，强制文字不换行。此时即使不设置max-width:100%，图片也不会缩小，而是会溢出Flex容器——因为图片的宽度是固定的，子项无法收缩到小于这个宽度。
• 给第一个<a>加上flex-shrink:0，禁止它收缩。此时即使设置了max-width:100%，图片也会保持固定宽度，第二个<a>的文字会自动换行。

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