Html 防止表格单元格挤压响应图像_Html_Css

Html 防止表格单元格挤压响应图像

html css

Html 防止表格单元格挤压响应图像,html,css,Html,Css,我有一个一行两列的表格。左侧单元格包含一个图像，其高度以em表示（em定义为2vh，因此所有内容都将根据视口高度进行调整）。右边的单元格包含一些文本 <html> <head> <style> body{ font-size:2vh; } </style> </head> <body> <table> <tr> <td> <img src="some.jpg" style="hei

我有一个一行两列的表格。左侧单元格包含一个图像，其高度以em表示（em定义为2vh，因此所有内容都将根据视口高度进行调整）。右边的单元格包含一些文本

<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>


身体{
字号：2vh；
}
一些文字，更多文字，甚至更多文字。

现在，在Firefox和InternetExplorer中，图像以适当的宽度和高度比例显示，右侧单元格中的文本被包装为剩余宽度。但在Chrome和Opera中，右单元格似乎会根据文本调整其宽度，而左单元格中图像的宽度会减小，以适应剩余的空间。所以问题是：我如何强制左侧单元格将其宽度调整为图像的计算宽度？（图像的高宽比并不总是相同的。）

建议的答案解决了一个不同的问题。它是关于将图像调整到表格单元格的。我的问题是如何调整单元格以适应图像。

试试这把工作小提琴，希望它能工作

CSS:

html。身体，桌子{
边际：0px；
填充：0px；
}
表{
显示：表格；
宽度：100%；
表布局：固定；
}
表tr{
显示：表格行；
宽度：100%；
}
表tr td{
显示：表格单元格；
宽度：25%；
}
.imageTable{
浮动：左；
宽度：100%；
}
.自动还原图像{
最大宽度：100%；
}

我解决了这个问题：怪癖在别处。我的CSS中有这样一个地方：

img{
   max-width:100%
}

这就是导致Opera和Chrome中出现奇怪行为的原因。如果您感兴趣，请查看此JSFIDLE并比较Opera和Chrome与Firefox和Internet Explorer中的行为：

此问题的可能重复是关于将图像调整为单元格，我的问题是关于将单元格调整为图像。在堆栈溢出中进行搜索，有几种方法可以根据图像调整单元格。