0

我有一个表格，其中一个单元格包含背景图像。单元格的宽度设置为页面宽度的 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>
4

1 回答 1

0

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

这是添加的小提琴。

于 2012-08-27T21:07:24.523 回答