CSS实现图片溢出隐藏不拉伸 调整缩略图高度不溢出a标签容器

你当前代码未生效的核心原因是 <a> 标签默认为行内元素，你设置的 height 与 overflow: hidden 属性无法正常生效，因此会完整展示整张图片。

调整后的CSS代码如下：

.image-link {
  /* 行内元素转块级，使宽高、溢出隐藏规则生效 */
  display: block;
  width: 200px;
  height: 400px;
  overflow: hidden;
}

.image {
  /* 宽度撑满父容器，高度自动适配原始比例，避免拉伸 */
  width: 100%;
  height: auto;
  /* 可选配置：需要控制图片裁剪对齐时开启，top代表保留顶部内容裁剪底部 */
  /*
  object-fit: cover;
  object-position: top;
  */
}

调整后图片会自动保持原始宽高比，完全不会出现拉伸变形，超出父容器400px高度的部分会被自动裁剪，不会溢出a标签容器，也不会影响你后续开发hover滚动效果。

预期效果参考：

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