简体   繁体   English

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

[英]Table cell height match background height

I have a table with one of the cells containing a background image. 我有一张桌子,其中一个单元格包含背景图像。 The width of the cell is set to be 100% of the page's width, and the background-size for the image is set to 100%. 单元格的宽度设置为页面宽度的100%,图像的背景尺寸设置为100%。 This results in a background image where the width of that image is scaled to match the width of the page. 这将生成背景图像,其中该图像的宽度将缩放以匹配页面的宽度。

I'm having troubles with the height though. 我在身高方面遇到了麻烦。

I'd like the height of the cell to be the height of the scaled image. 我希望单元格的高度为缩放图像的高度。 This would result in a cell with a width and height matching the width and height of the scaled image. 这将导致单元格的宽度和高度与缩放图像的宽度和高度相匹配。 The scaled image should always maintain its aspect ratio. 缩放的图像应始终保持其纵横比。

How can this be done using CSS? 如何使用CSS做到这一点?

Edit: 编辑:

The website I'm modelling after is essentially http://www.vassar.edu/ . 我要建模的网站实质上是http://www.vassar.edu/ The primary image in the center of the screen is what I'm trying to model. 屏幕中央的主要图像是我要建模的图像。 I want to be able to place text on top of this image. 我希望能够在此图像上方放置文本。

Here's the relevant HTML and CSS: 以下是相关的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>

It can't be done if you add the image as a background image. 如果将图像添加为背景图像,则无法完成。
But if it is a img element inside the table cell, then the cell height would differ to the image height. 但是,如果它是表格单元格中的img元素,则单元格高度将与图像高度不同。

Here's a Fiddle added . 这是一个小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM