DEMO

Question

我正在努力获得一个包含三个图像的行，以便正确调整大小。三个图像大小相同（270px x 270px）并共享一个大小为310px x 310px的普通背景图像（阴影），并在鼠标悬停在三个图像中的任何一个上时渲染。 jsFiddle这里：jsFiddle

我试过插入style =“height：310px;”在td标记，tr标记和.center CSS中，两者都没有正确调整行的大小 - 背景阴影图像的顶部和底部被截断。

有没有人有指针给我？谢谢。

CSS：

.center {
text-align: center;
}

#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML：

<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="images">
                <object class="images" type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

Answer 1

DEMO

您的图像周围没有足够的空间来正确显示阴影。您可以通过在图片div

中添加一些填充来添加更多空间

#images{
    padding:20px;
}

Answer 2

只需为包含图像的div添加适当的填充

将您的#images css更新为：

#images
{
    padding:20px;
}
#images:hover {
    background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
    background-repeat: no-repeat;
    background-position:center;     
    padding:20px;
}

请参阅此fiddle

Answer 3

你尝试过造型

吗？

    table td.center {
        attributes
    }

CSS中的

Answer 4

试试这个 -

#images{ padding:15px; }

完美无缺！

图像行大小调整

4 个答案:

DEMO