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

Question

我到处找，我想不出解决这个问题的办法。我也看过这个网站，但什么也找不到。

我有一张桌子，每个TD都有一个图像。当我悬停在img上时，我希望它向下移动100 to，而不是在TD之外流动(当它超出TD的边界时，我希望它被裁剪)。现在，它只是向下移动100 it，它没有被剪裁。这是我的表和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; 
}

我试过使用剪贴画属性，表格布局:固定的，但这只是移动我所有的图像到相同的位置，或使他们移动在对方之上。我什么都没试过，我想不出其他地方可以去看。

我只想让图像向下移动，当它们超越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>

​

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>

​

你也可以试试-

​

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>

​

我希望也能帮到你。