Flexbox中图片添加链接后无法自适应窗口大小的问题

当你用<a>标签包裹图片后，Flex容器的直接子元素从<img>变成了<a>，原来的flex属性只作用在<img>上，导致<a>无法作为Flex项伸缩，图片自然也跟着失去自适应能力。

修改后的代码： #

HTML：

<div class="container">
  <a href="website.html"><img src="001.jpg"></a>
  <a href="website.html"><img src="002.jpg"></a>
  <a href="website.html"><img src="003.jpg"></a>
</div>

CSS：

.container {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.container a {
  flex: 1 1 400px; /* 将flex属性应用到a标签，使其成为可伸缩的flex项 */
}

.container a img {
  width: 100%; /* 让图片填满父元素a的宽度 */
  height: auto; /* 保持图片的宽高比例 */
  display: block; /* 消除图片底部的默认空白间隙 */
}

关键说明： #

• 把原本给<img>的flex: 1 1 400px转移到<a>标签上，让<a>成为Flex容器的可伸缩子项
• 设置<img>的width: 100%，确保图片跟随<a>的尺寸变化而自适应缩放
• 添加display: block是为了去掉图片作为行内元素时底部的默认空白，避免布局出现多余间隙

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