自动调整为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

那件事...？

    <div class="pitch-container">
    <table id="pitch" width="100%">
    <tr>
    <td><img class="player-icon" src="img/players/0.jpg"><br>Player</td>
    </tr>
    </table>
    </div>
<style>
.pitch-container {
background-image: url(image.png);
background-repeat: no-repeat;
background-size: 100% 100%;
    max-width: 100%;
    height: auto;
    width: auto\9;
}
</style>

Answer 2

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

.player-icon
{
   width : 100%;
}

这必须解决您的问题。

Answer 3

请检查以下代码。您应该根据背景大小指定班级的身高。

#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: cover !important;
    height: 600px;
    background-position:50% 50%;}
    

<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 4

您需要将容器内的图像宽度设置为100％，它将自动调整高度以保持宽高比。

.player-icon
{
   width : 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>