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

我有一個包含背景圖像的單元格之一的表格。單元格的寬度設置爲頁面寬度的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

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

回答

相關問題