html - 自动调整为 100% 宽度保持纵横比的表格的图像背景

Question

我在使用背景图片时遇到问题。

我需要背景图像填充 div 容器的 100% 宽度并自动完成高度以保持其纵横比。

#pitch{background-color:d9ffd9;background:url('https://conceptdraw.com/a2048c3/p1/preview/640/pict--sport-field-plan-template-sport-field-plan---template.png--diagram-flowchart-example.png');background-position: top center;background-repeat: no-repeat;background-size: 100%,100%;}

<div id="pitch-container">
<table id="pitch" width="100%">
<tr>
<td><img class="player-icon" src="https://www.freeiconspng.com/minicovers/sports-football-2-icon-12.png"><br>Player</td>
</tr>
</table>
</div>

结果:

Answer 1

要解决这个问题，您唯一要做的就是将图像的宽度设置为 100%。 保持您的 HTML 不变，您的 CSS 应该类似于:

.player-icon
{
   width : 100%;
}

这一定能解决您的问题。