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

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

来源

2012-08-27 Andrew

你可以发布你的代码吗？ – j08691

我认为它与溢出选项有关。你介意分享表格HTML代码吗？ – Ammar

它不能如果添加图像作为背景图像进行。
但是，如果它是表格单元格内的img元素，那么单元格高度将与图像高度不同。

这是Fiddle added。

来源

2012-08-27 21:07:24 Krycke

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

回答

相关问题