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

【问题标题】：Image background for a table that adjusts automatically to the 100% width keeping aspect ratio自动调整为 100% 宽度保持纵横比的表格的图像背景
【发布时间】：2019-01-10 16:54:34
【问题描述】：

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

我需要背景图像填充 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>

结果：

【问题讨论】：

标签： html css html-table background-image

【解决方案1】：

要解决此问题，您只需将图像的宽度设置为 100%。保持你的 HTML 不变，你的 CSS 应该看起来像这样：

.player-icon
{
   width : 100%;
}

这一定能解决你的问题。

【讨论】：

请检查一下

【解决方案2】：

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

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

【讨论】：

我不想指定高度，它必须根据获得响应表的像素来调整大小。

【解决方案3】：

什么...？

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

【讨论】：

【解决方案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>

【讨论】：