Keep table cell from crunching responsive image

Question

I have a table with 1 row and 2 columns. The left cell contains an image, the height of which is given in em (em is defined as 2vh, so everything will adjust according to the viewport height). The right cell contains some text.

<html>
<head>
<style>
body{
font-size:2vh;
}
</style>
</head>

<body>
<table>
<tr>
<td>
<img src="some.jpg" style="height: 18em">
</td>
<td>
Some text, more text, even more text.
</td>
</tr>
</table>
</body>
</html>

Now in Firefox and Internet Explorer the image shows with the proper ratio of width and height, and the text in the right cell is wrapped to the remaining width. But in Chrome and Opera it seems that the right cell adjusts its width to the text and the width of the image in the left cell is reduced to fit into the remaining space. So the question is: How can I force the left cell to adjust its width to the calculated width of the image? (The height/width ratio of the image is not always the same.)

The suggested answer addresses a different problem. It is about adjusting an image to the table cell. My problem is about adjusting the cell to the image.

Possible duplicate of [Shrink image size to fit table cell, which works in all browsers?](http://stackoverflow.com/questions/17642539/shrink-image-size-to-fit-table-cell-which-works-in-all-browsers) — sailens, Nov 06 '15 at 11:12
This question is about adjusting an image to a cell, my question is about adjusting the cell to the image. — Martin Auer, Nov 06 '15 at 11:27
Do a search in stack overflow, there are several answers for adjusting the cell to the image. — sailens, Nov 06 '15 at 11:39

score 0 · Answer 1 · answered Nov 06 '15 at 11:57

Try this working fiddle, hope it will work
jsfiddle

CSS:

html. body, table {
    margin: 0px;
    padding: 0px;
}
table {    
    display: table;
    width: 100%;
    table-layout: fixed;
}
table tr {
    display: table-row;
    width: 100%;
}
table tr td {
    display: table-cell;
    width: 25%;
}
.imageTable {
    float: left;
    width: 100%;
}
.autoResizeImage {
    max-width: 100%;
}

<div class="imageTable">
    <table>
        <tbody>
            <tr>
                <td>
                    <img class="autoResizeImage" src="http://www.hhacademy.org/computer-lcd-monitor-vector.jpg" />
                </td>
                <td>
                    <img class="autoResizeImage" src="http://gatelyacademy.org/wp-content/uploads/2014/10/computer-156513_640.png" />
                </td>
                <td>
                    <img class="autoResizeImage" src="http://i.dailymail.co.uk/i/pix/2013/01/07/article-2258276-16C8FB51000005DC-20_638x476.jpg" />
                </td>
                <td>
                    <img class="autoResizeImage" src="http://www.computer-repair-service.co.uk/wp-content/uploads/2013/08/mac-computer.png" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

score 0 · Accepted Answer · answered Nov 06 '15 at 13:25

I solved this: The quirk is somewhere else. I had this somewhere in my CSS:

img{
   max-width:100%
}

This is what caused the strange behavior in Opera and Chrome. If you're interested, check out this jsfiddle and compare the behavior in Opera and Chrome vs. Firefox and Internet Explorer: http://jsfiddle.net/martinvie/3moocskt/6/

Keep table cell from crunching responsive image

2 Answers2