为SVG图片添加a标签设置链接后图片消失如何解决？

问题产生原因 #

你使用的.content容器为flex布局，最初容器的直接子元素是3个img标签，你为img设置了max-width: 32%，三个元素刚好可以在flex容器内均匀分布、正常显示。
当你给img套上<a>标签后，.content的直接子元素变成了<a>标签：

• 你没有为<a>标签设置任何宽度规则，<a>作为行内元素默认宽度由内容撑开
• 你给img设置的max-width: 32%是相对于它的直接父元素<a>的宽度计算的，父元素<a>没有明确宽度的情况下，img的百分比宽度规则失效，最终导致图片无法正常显示。

解决方法 #

可任选以下一种方案修改：

• 方案1：调整CSS选择器，让flex容器的所有直接子元素都适配宽度规则，同时保证内部img占满父元素宽度

.content{
  display: flex;
  justify-content: space-between;
}
/* 选中.content下的所有直接子元素，统一设置最大宽度 */
.contact .content > * {
  max-width: 32%;
}
/* 让img占满父元素的可用宽度 */
.contact .content img {
  width: 100%;
  height: auto;
}

• 方案2：单独为包裹img的a标签设置宽度规则

.content{
  display: flex;
  justify-content: space-between;
}
.contact .content a {
  max-width: 32%;
}
.contact .content img{
  width: 100%;
  height: auto;
}

• 方案3：不需要百分比自适应宽度的情况下，直接给img设置固定宽高，脱离父元素宽度限制

.contact .content img{
  width: 48px; /* 可根据实际需求调整尺寸 */
  height: 48px;
}

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