html - 当图像超出 TD 边界时裁剪图像

Question

我找遍了所有地方都想不出解决这个问题的办法。我也看过这个网站，但找不到任何东西。

我有一张 table ，每个 TD 里面都有一张图片。当我将鼠标悬停在 img 上时，我希望它向下移动 100px 但不要流到 TD 之外(我希望它在超出 TD 边界时被裁剪)。现在它只是向下移动 100px 并且没有被剪裁。这是我的表格和 CSS:

<table cellspacing="0">
    <tr>
        <td><img src="_images/ARDLThumbLarge.jpg" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="_images/ThousandYearsThumbLarge.jpg" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="_images/TableThumbLarge.jpg" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>

img:hover {
   position:relative;
   top: 103px; 
}

我试过使用 clip 属性 table-layout: fixed，但这只会将我所有的图像移动到相同的位置或使它们彼此重叠移动。我尝试的任何东西都不起作用，而且我想不出任何其他地方可以查看。

我只希望图像向下移动并在超出 TD 边界时被裁剪。

Answer 1

让我们使用一些更好的标记来实现这一点。 <table>元素是为表格数据制作的，而您所追求的是布局。

我们可以通过 CSS 属性实现同样的效果:display: table放在父 div 和 display: table-cell 上放置在包含图像的内部 div 上。

• 内部 div 被赋予固定高度和 overflow: hidden剪掉较高的图像。

• 当悬停每个内部 div 时，它的图像元素将被下推其高度的一半 transform: translateY(50%) .这会显示图像的后半部分。

• 过渡提供了流畅的动画效果

例子

当图像的高度完全相同且恰好是内部 div 高度的两倍时，此方法效果最佳。

.wrapper {
  display: table;
  margin: 0 auto;
}
.wrapper > div {
  display: table-cell;
  overflow: hidden;
  height: 300px;
  position: relative;
  min-width: 200px;
  width: 200px;
}
img {
  position: absolute;
  transition: transform .5s;
  bottom: 0;
}
.wrapper > div:hover img {
  transform: translateY(50%)
}

<div class="wrapper">
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
</div>