アスペクト比を失うことなく表のサイズを変更して反応させる

Question

私はいくつかのことを試みましたが運が悪いです。私はdivまたはテーブルの背景画像として設定する必要があるテキストを含む画像を持っています。 background-size：coverを使ってみましたが、そうすると画像とその中のテキストが歪んでしまいます。歪みのない背景画像を設定したり、サイズ変更時にアスペクト比を維持するにはどうすればよいですか？私はいくつかのことを成功させずに試してみると、不安を感じるので、より速い応答が役立ちます。

オリジナル画像：ここでhttps://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon

<table width="100%" border="0" cellspacing="10" cellpadding="150" style="background-image:url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon); width: 100%; height: 100%; border:none; margin:0px; background-size: cover;"> 
<tr > 
<td width="80%" > 
Test 
</td> 
<td width="20%" > 
Test 
</td> 
</tr> 
</table> 

はそれのためのフィドルです： http://jsfiddle.net/d95hd1dL/5/

ありがとうございました。

Answer 1

これを試してみてください：

HTML：

<table width="100%" border="1" cellspacing="10" cellpadding="150"> 
<tr > 
    <td width="80%" > 
    Test 
    </td> 
    <td width="20%" > 
    Test 
    </td> 
</tr> 
</table> 

CSS：

table{ 
    background: #000 url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon); 
    height: 100%; 
    border: none; 
    margin: 0px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

例：あなたは、バックグラウンドを試してみる必要があるhttp://jsfiddle.net/d95hd1dL/6/

Answer 2

-size：100％auto;背景サイズのinsted：カバー;

<table width="100%" border="1" cellspacing="10" cellpadding="150" style="background-image:url(https://dummyimage.com/1024x250/000000/fff.jpg&text=Coming+soon); border:none; background-size:100% auto; margin:0px; "> 
 
<tr > 
 
    <td width="80%" > 
 
    Test 
 
    </td> 
 
    <td width="20%" > 
 
    Test 
 
    </td> 
 
</tr> 
 
</table>