响应式图片网格：图片嵌套<a>标签后尺寸异常的问题求助

搭建了响应式图片网格布局，列数随设备宽度自适应，原本显示正常。但给图片嵌套<a>标签实现点击功能后，图片尺寸异常，不再遵循预设CSS样式（右下角嵌套<a>的图片尺寸偏小）。

图片仍处于.photos容器内，但.photos img选择器的效果似乎被干扰，怀疑是<a>标签导致样式覆盖，需要实现图片可点击的同时避免尺寸异常。

问题根源 #

你的.photos容器使用Flexbox布局，原本直接子元素是<img>，<img>作为flex项遵循布局规则；嵌套<a>后，<a>成为flex容器的直接子元素，而<a>默认是行内元素，未继承原<img>的flex属性与尺寸规则，导致内部图片失去正确布局上下文，出现尺寸偏差。

修复方法 #

给.photos下的所有直接子元素（包括<img>和<a>）统一设置flex布局规则，再让图片填满父容器：

* {
  box-sizing: border-box;
}

#imageTextGrid {
  width: 100vw;
  margin: 0;
  margin-right: 0;
}

.photos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 100vw;
}

/* 统一设置flex容器直接子元素的布局规则 */
.photos > * {
  display: block;
  flex: 0 0 auto;
}

/* 让图片填满父容器，保留原有装饰样式 */
.photos img {
  width: 100%;
  height: 100%;
  padding: .35vw;
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  .photos > * {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos > * {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen and (max-width: 768px) {
  .photos > * {
    width: 100%;
    height: 100%;
  }
}

效果说明 #

修改后，<img>和包裹图片的<a>都会作为flex项占据网格中对应的空间，内部图片自动填满父元素，既实现了点击功能，又保持了整个网格布局的一致性，解决了尺寸异常问题。

内容的提问来源于stack exchange，提问作者Maarten -Monica for president