如何用CSS裁剪ul li菜单列表图片并保留span标题文本？

我明白你的困扰——想把菜单里的图片裁剪到指定尺寸，结果给li加了overflow:hidden后连标题文本都被截断了。既然不能改HTML，那我们换个思路，只针对图片做裁剪，让标题不受容器溢出限制，具体CSS调整如下：

修改后的CSS代码 #

.menu li {
  display: inline-block;
  width: 150px; /* 固定宽度，比max-width更稳定 */
  margin: 0 1em;
  vertical-align: top;
}

.menu li a {
  display: flex;
  flex-direction: column; /* 让图片和标题垂直排列 */
  text-align: center; /* 标题居中，可选优化 */
  text-decoration: none; /* 去掉链接下划线，可选优化 */
}

.menu li img {
  width: 100%;
  height: 120px; /* 你想要的图片高度 */
  object-fit: cover; /* 关键属性！按比例裁剪图片，填满指定尺寸 */
  object-position: center; /* 裁剪时优先保留图片中心区域，可选优化 */
}

.title {
  margin-top: 8px; /* 给标题加一点间距，提升美观度 */
  color: #333; /* 可选，调整标题颜色 */
}

为什么这个方案有效？ #

• 去掉了li上的overflow:hidden，从根源避免标题被截断；
• 用flex布局让a标签内部的图片和标题垂直分布，结构更规整；
• object-fit: cover是核心：它能让图片保持原有比例，同时填满指定的宽高容器，超出部分自动裁剪，完美实现你想要的图片裁剪效果；
• 标题作为flex容器的子元素，会自动排在图片下方，不受图片尺寸限制，自然完整显示。

对应的HTML结构（无需修改） #

<ul class="menu">
  <li class="item">
    <a href="/test1">
      <img src="https://i.imgur.com/LRtmiFT.jpg">
      <span class="title">Title 1</span>
    </a>
  </li>
  <li class="item">
    <a href="/test2">
      <img src="https://i.imgur.com/2STzkq5.jpg">
      <span class="title">Title 2</span>
    </a>
  </li>
  <li class="item">
    <a href="/test3">
      <img src="https://i.imgur.com/grvjWRW.jpg">
      <span class="title">Title 3</span>
    </a>
  </li>
</ul>

这样调整后，图片会被精准裁剪到150px宽、120px高的尺寸，同时标题文本完全不会被截断，完美符合你的需求~

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