Html 如何将表格单元格放大到其背景图像的大小？_Html_Css

Html 如何将表格单元格放大到其背景图像的大小？

html css

Html 如何将表格单元格放大到其背景图像的大小？,html,css,Html,Css,我设置了一个图像库，其中图片部分显示在每个单元格中，作为单元格背景的预览。当鼠标移动到单元格上时，单元格将扩展到全图的大小。我想知道是否有一种方法可以根据图像尺寸自动调整单元格大小，而不是手动输入完整尺寸作为鼠标悬停时单元格的高度和宽度。我已经尝试过将height='200px'替换为height=auto或height=100%，但两者都不起作用下面是一个代码示例： <table cellpadding="0" border="0"> <tr>

我设置了一个图像库，其中图片部分显示在每个单元格中，作为单元格背景的预览。当鼠标移动到单元格上时，单元格将扩展到全图的大小。我想知道是否有一种方法可以根据图像尺寸自动调整单元格大小，而不是手动输入完整尺寸作为鼠标悬停时单元格的高度和宽度。我已经尝试过将height='200px'替换为height=auto或height=100%，但两者都不起作用

下面是一个代码示例：

<table cellpadding="0" border="0">  
        <tr>
            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/1.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/2.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/3.jpg"></td>
       </tr>
</table>

您可能想考虑使用JavaScript来实现这一点。

如果是这样，您可以将onmouseover和onmouseleave事件更改为

onmouseover=function1this；onmouseleave=function2this

然后在javascript中使用它来更改元素的宽度和高度属性

function1(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '400px';
    document.getElementById(elementID).style.height = '268px';
}
function2(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '275px';
    document.getElementById(elementID).style.height = '200px';
}

请注意，您必须为每个td元素提供一个唯一的id

因此，使用ID和函数，您的html tds将如下所示

<td id="cell1" width="275px" height="200px" onmouseover="function1(this);" style="background-repeat: no-repeat;" 
class="fx" onmouseleave="function2(this);" align="center" background="images/kitchen/1.jpg"></td>

我希望这有帮助，如果你有任何问题，请告诉我。

你可能想考虑使用JavaScript来做这件事。如果是这样，您可以将onmouseover和onmouseleave事件更改为

onmouseover=function1this；onmouseleave=function2this

然后在javascript中使用它来更改元素的宽度和高度属性

function1(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '400px';
    document.getElementById(elementID).style.height = '268px';
}
function2(elem)
{
    var elementID = elem.id;
    document.getElementById(elementID).style.width = '275px';
    document.getElementById(elementID).style.height = '200px';
}

请注意，您必须为每个td元素提供一个唯一的id

因此，使用ID和函数，您的html tds将如下所示

<td id="cell1" width="275px" height="200px" onmouseover="function1(this);" style="background-repeat: no-repeat;" 
class="fx" onmouseleave="function2(this);" align="center" background="images/kitchen/1.jpg"></td>

我希望这会有所帮助，如果您有任何问题，请告诉我。

onmouseover和onmouseleave属性应该包含脚本，而不是样式。如果要使用样式执行此操作，请创建css样式fx和fx:hover，并将所有样式从标记属性移动到类中

<style>
    .fx {
      border: 0;
      background-repeat:no-repeat;
      background-position: center;
      width: 125px;
      height: 125px;
    }
    .fx:hover {
      width: 250px;
      height: 250px;
    }
</style>

如果您不想硬编码图像大小，如果您不想看到整个行和列在悬停时展开，则需要深入研究javascript和其他具有div层的精简内容。

onmouseover和onmouseleave属性应该包含脚本，而不是样式。如果要使用样式执行此操作，请创建css样式fx和fx:hover，并将所有样式从标记属性移动到类中

<style>
    .fx {
      border: 0;
      background-repeat:no-repeat;
      background-position: center;
      width: 125px;
      height: 125px;
    }
    .fx:hover {
      width: 250px;
      height: 250px;
    }
</style>

如果你不想硬编码图像大小，如果你不想看到整个行和列在悬停状态下展开，你需要深入研究javascript和其他具有div层的精简内容。

有趣的效果：我会使用比css中使用的大小更大的图像

<html>
<head>
<title>Css and Html Test</title>
<style>
table tr td {
    width: 275px;
    height: 200px;

    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
}
table tr td:hover {
    width: 400px;
    height: 268px;
    background-size: contain;
}
</style>
</head>

<body>

<table cellpadding="0" border="0">  
        <tr>
            <td class="fx" background="image1.jpg"></td>
            <td class="fx" background="image2.jpg"></td>
            <td class="fx" background="image3.jpg"></td>
       </tr>
</table>

</body>
</html>

有趣的效果：我会使用比css中使用的大小更大的图像

<html>
<head>
<title>Css and Html Test</title>
<style>
table tr td {
    width: 275px;
    height: 200px;

    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
}
table tr td:hover {
    width: 400px;
    height: 268px;
    background-size: contain;
}
</style>
</head>

<body>

<table cellpadding="0" border="0">  
        <tr>
            <td class="fx" background="image1.jpg"></td>
            <td class="fx" background="image2.jpg"></td>
            <td class="fx" background="image3.jpg"></td>
       </tr>
</table>

</body>
</html>

您可能想看看或尝试一下transform:scale；无碰撞效应

桌子{ 表布局：固定；保证金：自动；宽度：550px； } 运输署{ 宽度：275px；高度：200px；背景：urlhttp://dummyimage.com/400x268 中心不重复；过渡：0.25s；框阴影：插入0 2px； } td:悬停{ 背景大小：100%100%；变换：比例1.4545,1.34；变换原点：中心； } 身体{ 文本对齐：居中；

您可能希望查看或尝试transform:scale；无碰撞效果

一行中有3个td单元格。如果增加一个单元格的高度，该行中其他单元格的高度也将增加。这将影响背景图像的高度。您可以创建一个默认样式，显示背景位置：居中；和一个：悬停样式以增加单元格大小。您可以使用背景nd size:contain；用于安装悬停单元格。使用此代码，我发现了一个有趣的效果。我将在答案中粘贴测试代码，以便使用。您必须提供自己的图像。一行中有3个td单元格。如果增加一个单元格的高度，该行中其他单元格的高度也将增加。这将影响背景图像的。您可以创建一个默认样式，显示背景位置为：居中的背景；以及一个：悬停样式以增加单元格大小。您可以使用背景大小：contain；来适应悬停的单元格。使用此代码，我发现了一个有趣的效果。我将在answe中粘贴我的测试代码为了玩它。你必须提供你自己的图像。我同意行的其余部分在悬停时展开，我也同意行的其余部分在悬停时展开，但你看，你仍然在手动输入完整的图像尺寸。这一点是为了能够使用不同尺寸的图像，并且仍然具有代码正常工作，在m上显示完整图像

您可能需要使用脚本来获取每个图像的各个维度。看看这篇文章：但是你仍然在手动输入完整的图像尺寸。这一点是为了能够使用不同尺寸的图像，并且代码仍然能够正常工作，在鼠标悬停时显示完整的图像。您可能需要使用脚本来获取每个图像的各个尺寸。请看这篇文章：