Question

我有一个包含1行和2列的表格。左侧单元格包含一个图像，其高度在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>

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

建议的答案解决了另一个问题。它是关于将图像调整到表格单元格。我的问题是关于将细胞调整到图像。

Answer 1

试试这个工作小提琴，希望它会起作用 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>

Answer 2

我解决了这个问题：怪癖在别的地方。我在CSS的某个地方有这个：

img{
   max-width:100%
}

这是导致Opera和Chrome出现奇怪行为的原因。如果您有兴趣，请查看此jsfiddle并比较Opera和Chrome与Firefox和Internet Explorer中的行为：http://jsfiddle.net/martinvie/3moocskt/6/

保持表格单元不会处理响应图像

2 个答案: