1

TABLEグリッドを表示するという本来の目的で実際に使用されている があります。セルは固定サイズのセルで、各セルの幅と高さは一定で、CSS で定義されています。

収まる限り、テキストと画像をセルに簡単に入れることができます。しかし、セルよりも大きい画像を に入れようとすると、セルがTD引き伸ばされ、どの次元が大きすぎるかに応じて、その列全体または行全体 (またはその両方) が引き伸ばされます。

テーブルを固定サイズのままにする必要がありますが、セルよりも大きい特定のセルに配置された画像も必要です。このエフェクトを設定するにはどうすればよいですか?

簡単な例を挙げると：

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

画像が 1 つのセルの幅と 2 倍の高さであると想像してください。2 つの垂直セルを完全にカバーするにはどうすればよいですか?

4

2 に答える 2

3

max-widthandmax-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 に答える