缩放img标签后a标签宽度异常的解决方法咨询（无需显式设置固定宽度）

这个问题的根源在于block元素的默认宽度特性：display:block的元素会默认撑满父容器的100%宽度，哪怕内部内容（比如缩放后的img）更窄。下面是几个不用显式写死宽度的解决方案：

方法1：将a标签改为inline-block/inline-flex #

把a的display属性从block换成inline-block（或者inline-flex），这样元素的宽度会由内部内容决定，完美匹配缩放后的img宽度：

a { 
  height: 64px; 
  padding: 10px; 
  display: inline-block; /* 换成inline-flex也可以 */
}
img { max-height: 100%; }

这个方法兼容性很好，几乎所有现代浏览器都支持，同时padding也能正常生效。

方法2：使用width: fit-content #

CSS的fit-content值可以让元素宽度自动收缩到内容的最大宽度，刚好适配缩放后的img：

a { 
  height: 64px; 
  width: fit-content; 
  padding: 10px; 
  display: block;
}
img { max-height: 100%; }

如果需要让a标签居中的话，还可以配合margin: 0 auto使用，非常灵活。

方法3：借助Flex布局 #

如果你的布局允许，用Flex也能轻松解决这个问题：

方案A：给a的父容器设置flex #

/* 假设a的父容器类名为parent */
.parent { display: flex; }
a { 
  height: 64px; 
  padding: 10px; 
  display: block;
}
img { max-height: 100%; }

方案B：让a自身成为flex容器 #

a { 
  height: 64px; 
  padding: 10px; 
  display: flex;
  align-items: center; /* 可选，让img垂直居中 */
}
img { max-height: 100%; }

Flex容器的宽度会自动适配子元素的尺寸，所以a会跟着img的缩放宽度走，还能顺便处理垂直对齐的问题。

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