javascript - 表格单元格高度匹配背景高度

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 元素，则单元格高度将不同于图像高度。

这是一个 Fiddle added .