Question

我的网站响应能力有问题。我有一张图片，在尝试适合该页面时会溢出其容器。侧面在Firefox中工作正常，并且只有在chrome中打开时，我才能看到问题。

Firefox和chrome并排显示的图片，Firefox在左侧，Chrome在右侧：

站点：

基本模板中的代码

<!doctype html>

  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112234171-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-112234171-1');
</script>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<title>NPCbase</title>

  {% block meta %}

  <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5a5215360f300f0013e83388&product=inline-share-buttons"></script>
<meta property="og:url"                content="http://www.npcbase.com/character/" />
<meta property="og:title"              content="Generate over 84 million unique characters" />
<meta property="og:description"        content="Click here to generate more!" />
<meta property="og:image"              content="https://i.imgur.com/MhszXDH.png" />

      {% endblock %}

  </head>
  <body>
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11&appId=474470075910812';
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

  <div class="container">

  <header class="masthead">

    <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav text-md-center nav-justified w-100">

              <li class="nav-item active ">
                <a class="btn btn-success " style="width:75%;"href="{% url 'index' %}" role="button">NPCbase</a>


              <li class="nav-item ">
                <a class="btn btn-success " style="width:75%; "href="{% url 'soundscape' %}" role="button">Soundscapes</a>
              </li>
              <li class="nav-item ">
                <a class="btn btn-success " style="width:75%; "href="{% url 'feedback' %}" role="button">Suggestions</a>                  </li>
              <li class="nav-item ">
                <a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.npcbase.com&p[images][0]=&p[title]=&p[summary]=" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false"><button style="width:75%; " type="button" class="btn btn-success"> Share on Facebook</button></a>
              </li>

        </ul>
      </div>
    </nav>
  </header>

    {% block content %}
    {% endblock %}

</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

还有带有图片的模板

{% block content %}

<main role="main">
    <div class="jumbotron">
      <div class="col-sm-10 mx-auto justify-content-center">
          <div class="row  justify-content-center">
          <h1> Seed: {{ seed|upper }}</h1>

          </div>

          <div class="row  justify-content-center img-fluid" alt="Responsive image" >

                <img src={% url 'cave_image' seed %} >

          </div>

          <div class="row  justify-content-center">
            <p>
                <a class="btn btn-primary" href="{% url 'caveGenerator' %}" role="button">Generate Another</a>

                <a class="btn btn-primary" href="https://www.facebook.com/sharer/sharer.php?u={{ request.get_host }}{% url 'caveGenerator' seed %}" role="button"
                    onclick="window.open('Https://www.facebook.com/sharer/sharer.php?u={{ request.get_host }}{% url 'caveGenerator' seed %}',
                                         'newwindow',
                                         'width=400,height=400');
                    return false;"
                    > Share Cave on Facebook</a>
            </p>
          </div>
          <div class="row  justify-content-center">
            <p>

            </p>
          </div>


      </div>

    </div>
              <div class="row  justify-content-center" align="center">
              <p>
                If you have any suggestions, feedback or ideas for snippets, please post it at the suggestions tab
              </p>
          </div>
 </main>

Bootstrap响应性不适用于Chrome

0 个答案: