Question

我有一排很好的td元素。

< table > < tbody >
  < tr > {
    JSON.parse(this.state.data).resultCards.map(function(card) {
      return <td > {
        Math.round(card.deviation * 10000) / 10000
      } < img src = {
        'https://image.deckbrew.com/mtg/multiverseid/546841.jpg'
      }
      /></td > ;
    })
  } < /tr>
</tbody > < /table>

在样式表中，我将td元素转换为0.6比例：

tr td tr td{       
    background-color: #7B8585;
    color: #F8F8F8;

    transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    -webkit-transform: scale(0.6, 0.6);
    overflow: visible;
    transition: 0.3s;
    border-radius: 5px;
}

在悬停时我又将它们扩展到完整尺寸：

tr td tr td:hover{
    color: #7b8585;
    background-color:#d8f2f1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

到目前为止，这么好。问题是，页面上的布局就像<td>元素是全尺寸一样，因此每个元素之间存在较大的间隙，我不希望它存在。我不能让样式指定高度/宽度并在悬停时更改高度/宽度，因为<td>中的图像具有一定的大小。我可以在悬停时更改图像大小，但是它存在以较低分辨率加载的问题，并且当恢复到原始大小时，会出现颗粒感和低分辨率。从本质上讲，我正在尝试制作缩小的缩略图，但在悬停时会变成全分辨率大小。这是一个粗略的例子：https://jsfiddle.net/j713vd40

删除一行缩放转换的td元素之间的空格

0 个答案: