如何在比单元格大的表格单元格上显示图像？

时间：2012-07-06 04:24:45

标签： html css layout

我有TABLE实际上用于其预期目的，以显示网格。细胞是固定大小的细胞，每个细胞的宽度和高度都是恒定的，并在CSS中定义。

只要符合要求，我就可以轻松地将文本和图像放入单元格中。但是，如果我尝试将比单元格大的图像放入TD，它最终会拉伸单元格，以及整个列或整个行（或两者），具体取决于哪个维度（ s）太大了。

我需要将表保持固定大小，但我还需要一个位于特定单元格的图像，该单元格大于单元格。我应该如何设置此效果？

举一个简单的例子：

+---+---+---+
|   |   |   |
+---+---+---+
|   | X |   |
+---+---+---+
|   | X |   |
+---+---+---+

想象一下，图像与一个细胞一样宽，是两倍高。我需要做些什么来使它完全覆盖两个垂直单元？

2 个答案:

答案 0 :(得分：2)

您可以将max-width和max-height属性用于100%，以便图片不会超出单元格。小提琴即将来临！ ：）

HTML 

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://windows7supportnow.com/wp-content/uploads/2012/06/Windows-vista-help-1.jpg" class="normal" /></td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td><img src="http://windows7supportnow.com/wp-content/uploads/2012/06/Windows-vista-help-1.jpg" class="fullsize" /></td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td><img class="normal" src="http://edibleapple.com/wp-content/uploads/2009/04/silver-apple-logo.png" /></td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
</table>

的JavaScript 

$(document).ready(function(){
    $("img").click(function(){
        $(this).toggleClass("normal");
    });
});​

CSS 

td, td img.normal, img.fullsize.normal {height: 100px; max-height: 100px; width: 100px; max-width: 100px;}
td {position: relative;}
img.fullsize {position: absolute; top: 0; left: 0; z-index: 100; height: auto; max-height: auto; width: auto; max-width: auto;}​

预览＆amp;演示

Table

小提琴：http://jsfiddle.net/4f9K5/1/

答案 1 :(得分：1)

    <!DOCTYPE html>
    <html>
<head>
<style>td{ width:100px; vertical-align:top;  height:100px; border:solid 1px;}
img{position:absolute; top:0px; left:0px;}</style><script src="jquery.js"></script>
</head>    <body>

<table>
<tr><td><div style="position:relative;"><img src="planet.png"></div></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
    </html>

http://jsfiddle.net/bRyCw/4/

相关问题
最新问题