图片转链接后尺寸缩小？Flexbox作品集缩略图画廊问题求助

嘿，很高兴你开始搭建自己的第一个作品集网站啦！这个Flexbox画廊的问题其实很典型，咱们来拆解一下原因和解决办法：

问题根源 #

你给图片设置的width="15%"，这个百分比是相对于父元素宽度计算的。当图片直接放在.container（Flex容器）里时，父元素就是.container，15%基于容器宽度计算，显示自然正常。

但把图片包裹进<a>标签后，<a>默认是行内元素（display: inline），它的宽度不会自动继承容器的可用空间，反而由内部图片撑开。这时候图片的15%就变成了相对于<a>标签的宽度，而<a>本身没有明确宽度，就会形成“图片越窄→链接越窄→图片更窄”的循环，最终导致图片缩成极小状态。

解决办法 #

我们只需要调整<a>标签的样式，让它成为合适的Flex子项，同时让图片占满链接空间即可，这里有两种简单的实现方式：

方法1：让<a>成为Flex项（推荐）

修改CSS，给<a>标签添加Flex相关属性，同时让图片占满链接宽度：

/* projects menu */
.container {
  display: flex;
  overflow-x: scroll;
  margin-bottom: 10%;
  /* 去掉justify-content: center，横向滚动时居中会导致初始位置隐藏部分内容 */
}

.container a {
  flex: 0 0 auto; /* 禁止链接伸缩，保持固定宽度 */
  width: 15%; /* 设定链接宽度为容器的15% */
  margin-right: 15px; /* 把外边距移到a上，避免最后一张图也有右边距 */
}

.container img {
  width: 100%; /* 让图片占满父链接的宽度 */
  height: auto;
}

同时建议去掉HTML里图片的内联width="15%"，用CSS统一管理样式，后续修改会更方便。

方法2：把<a>设为块级元素

如果不想用Flex属性，也可以将<a>转为块级元素并指定宽度：

/* projects menu */
.container {
  display: flex;
  overflow-x: scroll;
  margin-bottom: 10%;
}

.container a {
  display: block;
  width: 15%;
  margin-right: 15px;
}

.container img {
  width: 100%;
  height: auto;
}

小优化提示 #

• 给.container添加padding: 0 10px，让首尾图片和容器边缘有一些间距，视觉上更舒服；
• 可以给滚动容器自定义滚动条样式，提升交互体验（比如用::-webkit-scrollbar系列属性）。

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