如何修复包裹自适应缩放img的a标签宽度过大问题

修复方法 #

该问题是因为包裹图片的<a>标签为行内元素，默认会按照内部图片的原始尺寸计算宽度，不会跟随图片缩放后的尺寸收缩，所以会撑大宽度挤开后续元素。

你只需新增如下CSS规则即可解决：

.wrapper a {
  display: flex;
  max-height: 100%;
}

修改后的完整CSS代码如下：

.section {
  height: 100px;
  display: flex;
}

.wrapper {
  padding: 20px;
  display: flex;
  max-height: 100%;
}

.wrapper a {
  display: flex;
  max-height: 100%;
}

img {
  max-height: 100%;
}

修改后<a>标签会继承父级.wrapper的最大高度限制，宽度会自动适配内部缩放后的图片尺寸，不会再出现宽度过大挤开其他元素，被a标签包裹的图片和直接放置的图片展示效果会完全一致。

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