裁剪列表图像并保留文本

Question

我有一个包含图片和文字的菜单ul li列表。

  

我无法编辑HTML，只能用CSS修改它。

使用CSS我想裁剪图像以适应最大宽度/高度，但保留span文字标题。

问题在于嵌套HTML的方式，overflow: hidden切断了span文字。

https://jsfiddle.net/vdL79psL

.menu li {
  display: inline-block;
  max-width: 150px;
  max-height: 120px;
  vertical-align: top;
  margin: 0 1em;
  overflow: hidden;
}

.menu li img {
  max-width: 150px;
}

.title {
  overflow: visible; /* does not work */
}

<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>

Answer 1

一个想法是在a元素上应用溢出然后使span相对于li（使用position:absolute）而不是a定位1}}所以它不会受到溢出的影响：

.menu li {
  display: inline-block;
  max-width: 150px;
  vertical-align: top;
  margin: 0 1em;
  position: relative; /*relative here !*/
  margin-bottom:35px; /*To consider the space taken by the title*/
}

.menu li a {
  display: block;
  max-height: 120px;
  overflow: hidden; /*overflow here */
}

.menu li img {
  max-width: 150px;
}

.title {
  margin-top: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

<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>

Answer 2

试试这可能会对你有所帮助

＆＃13;

＆＃13;

.menu li {
  display: inline-block;
  max-width: 150px;
   vertical-align: top;
  margin: 0 1em;
  overflow: hidden;
   max-height: 120px;
position: relative;
}

.menu li img {
  width: 150px;
}

.title {
overflow: visible;
display: block;
position: absolute;
bottom: 0;
z-index: 999;
background: #fff;
display: block;
right: 0px;
left: 0px;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;