I am working with a table that has 1 row and 2 columns. The left cell of the table contains an image with its height set in em (em is defined as 2vh, so it will adjust based on the viewport height). The right cell contains 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>
In Firefox and Internet Explorer, the image displays with the correct width and height ratio while the text wraps in the right cell. However, in Chrome and Opera, the right cell adjusts its width to the text causing the image in the left cell to shrink. How can I ensure that the left cell adjusts its width according to the image's calculated width? (The aspect ratio of the image varies.)
The proposed solution discussed a different issue related to adjusting an image to fit a table cell. My concern is specifically about adjusting the cell size based on the image dimensions.