表格单元格高度与背景高度匹配

Question

我有一张桌子，其中一个单元格包含背景图像。 单元格的宽度设置为页面宽度的100％，图像的背景尺寸设置为100％。 这将生成背景图像，其中该图像的宽度将缩放以匹配页面的宽度。

我在身高方面遇到了麻烦。

我希望单元格的高度为缩放图像的高度。 这将导致单元格的宽度和高度与缩放图像的宽度和高度相匹配。 缩放的图像应始终保持其纵横比。

如何使用CSS做到这一点？

编辑：

我要建模的网站实质上是http://www.vassar.edu/ 。 屏幕中央的主要图像是我要建模的图像。 我希望能够在此图像上方放置文本。

以下是相关的HTML和CSS：

td.content
{
    vertical-align:  top;
    text-align:      left;
    font-family:     "Arial";
    font-style:      normal;
    font-size:       0.9em;
    background:      url('/pages/home/intro_image.jpg');
    background-size: 100%;
    width:           100%;
}

table.content_document
{
    width:            50%;
    padding:          0px;
    margin-top:       2em;
    border:           solid thin grey;
    border-radius:    0.5em;
    box-shadow:       black 0.5em 0.5em 0.3em;
    background-color: white;
    padding:          1em;
    position:         relative;
}

td.content_text_cell
{
    overflow: scroll;
}

<table>
    <tr class="content">
        <td class="content" colspan="2">
            <table class="content_document">
                <tr>
                    <td class="content_text_cell">
                        <p>
                            This is a simple test
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

如果将图像添加为背景图像，则无法完成。
但是，如果它是表格单元格中的img元素，则单元格高度将与图像高度不同。

这是一个小提琴 。