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。

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

1 个答案: