1

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

我可以很容易地将文本和图像放入单元格中，只要它们适合。但是，如果我尝试将比单元格大的图像放入 aTD中，它最终会拉伸单元格，以及它的整个列或整个行（或两者），具体取决于哪个维度太大。

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

举一个简单的例子：

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

想象一下，图像的宽度和高度正好是一个单元格的两倍。我需要做什么才能使它完美地覆盖两个垂直单元格？

4

2 回答 2

3

您可以使用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;}​

预览和演示

桌子

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

于 2012-07-06T04:27:28.383 回答
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/

于 2012-07-06T04:37:19.897 回答