Question

我对此仍然有点新意，所提议的解决方案似乎都没有帮助我。由于我使用jinja2作为模板语言，因此显示代码有点困难，所以我正在显示整个页面源。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Record Scrobbler</title>
<link rel="icon" href="/static/img/favicon.ico">

<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
    body {
        padding-top: 70px;
        margin-bottom: 10px;
    }
    .footer {
          position: absolute;
          bottom: 0;

          /* Set the fixed height of the footer here */
          height: 80px;

    }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Record Scrobbler</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="/about">About</a></li>

                <li><a href="/collection/boudey">Collection</a></li>
                <li><a href="/boudey/explore">Explore</a></li>
                <li><a href="/add_record/?username=boudey">Add Record</a></li>
                <li><a href="/logout?username=boudey">Logout</a></li>

        </ul>
    </div><!--/.nav-collapse -->
</div>

<div class="'container">

    <div class="row" id="row_1">
        <div class="col-md-12" id="image_1">
            <img src="/static/tmp_viz/bar.png"
            style="width: auto; height: auto; float: right">
        </div>

    </div>

<div id="footer" style="white-space: nowrap">
    <div class="container text-left">
        <footer class="footer">
            <p>&copy; Boudewijn Aasman.</p>
            <div class="nav3" style="height:705px;">
                <a href="https://github.com/baasman" class="icons"><img src="/static/img/Octocat.jpg"
                                                                        style="width:50px;height:50px;"></a>
                <a href="https://www.last.fm/user/boudey" class="icons"><img src="/static/img/lastfm_red_small.jpeg"></a>
            </div>
        </footer>
    </div>
</div>

</html>

'bar.png'图像在左侧被切断。我该怎么做才能解决这个问题？我假设它与我必须做的填充有关，以使导航栏和页脚正确显示，或者在引导网格上某处溢出。

编辑：图片：尺寸：516x366

页面截图：

编辑：所以我不认为这是一个HTML或CSS问题，而是一个matplotlib问题。

sns.set_style('white')

fig, ax = plt.subplots(2, figsize=(8, 6), sharex=True)

counts_per_artist = df.groupby('Artist').TimesPlayed.sum()
counts_per_artist = counts_per_artist.sort_values(ascending=False).head(10)
index_artist = np.arange(len(counts_per_artist))

counts_per_album = df[['Title', 'TimesPlayed']].sort_values('TimesPlayed', ascending=False).head(10)
index_title = np.arange(len(counts_per_album))

bar_width = .35

rects = ax[0].barh(index_artist, counts_per_artist, alpha=.4, color='green',
               label='Artists', tick_label=counts_per_artist.index,
                align='center')
rects2 = ax[1].barh(index_title, counts_per_album.TimesPlayed, alpha=.4, color='red',
                   label='Records', tick_label=counts_per_album.Title)
ax[0].legend()
ax[1].legend()
plt.gcf().subplots_adjust(left=0.4)
fig.savefig('/Users/baasman/PycharmProjects/pyvinyl/static/tmp_viz/bar.jpeg',
           bbox_inches='tight')

将它从png更改为jpeg似乎解决了这个问题，但我不明白为什么。

图像被切断

0 个答案: