当图像超出TD边界时剪切图像

Question

我找遍了所有地方，但我想不出解决这个问题的办法。我也在这个网站上找过，但是什么也找不到。

我有一个表，每个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="https://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="https://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="https://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="https://i.stack.imgur.com/dnYac.jpg">
  </div>
</div>

Answer 2

尝试添加overflow:hidden

table td{
    overflow: hidden;
}

演示

Answer 3

你可以试试-

table{
       border-collapse:collapse;
}
table td{
    overflow: hidden;
}
img{
    display: block;
}
img:hover {
   position:relative;
   top: 103px; 
}

<table cellspacing="0">
    <tr>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>

你也可以试试like it -

table{
       border-collapse:collapse;
}
table td{
    overflow: hidden;
}
img{
    position:relative;
    display: block;
}
img:hover {
     -webkit-animation: example 1s 1 ease;
    animation: example 1s 1 ease;
    top:100px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0% {top:0;}
    100% {top: 100px;}
}
/* Standard syntax */
@keyframes example {
    0% {top:0;}
    100% {top: 100px;}   
}

<table cellspacing="0">
    <tr>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>