html - 在不丢失宽高比的情况下调整表格背景图像的大小并使其响应

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>

这是它的 fiddle : 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/