Question

I’ve got a TABLE that’s actually being used for its intended purpose, to display a grid. The cells are fixed-size cells, with both the width and the height of each cell being constant and defined in CSS.

I can put text and images into the cells easily enough, as long as they fit. But if I try to put an image that’s larger than the cell into a TD, it ends up stretching the cell, and either its entire column or its entire row (or both) depending on which dimension(s) are too big.

I need the table to remain fixed-size, but I also need an image positioned at a specific cell, which is larger than the cell. How should I go about setting this effect up?

To give a simple example:

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

Imagine the image is exactly as wide and twice as high as one cell. What do I need to do to make it cover two vertical cells perfectly?

Answer 1

You can use the max-width and max-height properties to 100%, so that the image doesn’t exceed the cell. Fiddle coming on the way! 🙂

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;}​

Preview & Demo

Fiddle: http://jsfiddle.net/4f9K5/1/