0

背景画像を含むセルの 1 つを含むテーブルがあります。セルの幅はページの幅の 100% に設定され、画像の background-size は 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 要素の場合、セルの高さは画像の高さとは異なります。

ここに追加された Fiddle があります。

于 2012-08-27T21:07:24.523 に答える