1

这是我创建的小提琴http://jsfiddle.net/pAQTn/

如果您看到它现在的工作方式是悬停在图像上，图像会放大 20% 并重叠到表格中。

我怎样才能放大图像，同时扩大我的桌子的尺寸。这是我的代码。

<table border="1">
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
</table>

这是CSS

img:hover {
    border:1px solid #0000ff;
    width:120%;
    height:120%;
}
4

3 回答 3

1

习惯%成px这样

img:hover{
     border:1px solid #0000ff;
    width:120px;
    height:120px;
}

演示

于 2013-07-05T07:36:23.393 回答
1

您需要做的是转换%为px使用而不是使用position: absolute;，以便您的细胞不会移动

演示

img:hover{
    border:1px solid #0000ff;
    width:120px;
    height:120px;
    position: absolute;
}
于 2013-07-05T07:40:11.930 回答
0

如上所述，您不能使用 %. 如果您使用 % ，它将尝试将高度和宽度设置为容器的 120%，因此显然无法调整容器的大小，否则它将不得不再次调整图像的大小，这显然会无限进行。

如果您将图像包装在另一个元素中，即 div，它可能会满足您的需求，但我还没有来得及尝试。

编辑： div 没有工作！

于 2013-07-05T07:39:52.240 回答