Фон изображения для таблицы, которая автоматически подстраивается под 100% ширину, сохраняя пропорции - PullRequest
Новая
       8

Фон изображения для таблицы, которая автоматически подстраивается под 100% ширину, сохраняя пропорции

0 голосов
/ 10 января 2019

У меня проблемы с таблицей с использованием фонового изображения.

Мне нужно, чтобы фоновое изображение заполняло 100% ширину контейнера div и автоматически заполняло высоту, сохраняя его соотношение сторон. 

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

Результат:

Ответы [ 4 ]

0 голосов
/ 13 января 2019

Вам необходимо установить ширину изображения на 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>
0 голосов
/ 10 января 2019

Чтобы решить эту проблему, единственное, что вам нужно сделать, это установить ширину изображения на 100%. Держите ваш HTML таким же, и ваш CSS должен выглядеть примерно так: 

.player-icon
{
   width : 100%;
}

Это решит твою проблему.

0 голосов
/ 10 января 2019

Пожалуйста, проверьте следующие коды. Вы должны указать высоту для класса в зависимости от размера фона. 

#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>
0 голосов
/ 10 января 2019

что-то такое ...? 

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