无法将图片放在移动设备标题中

Question

我在定制网上找到的MikroTik登录网站时遇到问题。 尽管其他一切都正常，但我无法将“ images / logo.png”放在移动设备上。 （屏幕宽度小于图片宽约500px的设备）

是的，我知道我是一名业余爱好者，但我现在头疼，但我现在准时准时，任何帮助将不胜感激。到现在为止，将“ center”和“ witdh = auto”放到任何地方，希望是我所能做的一切。

如果您还有其他需要，请告诉我，我会尽快提供。

@charset 'UTF-8';
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=4.0.1');
  src: url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'), url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'), url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal
}


/*
	Tessellate 1.0 by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/


/*********************************************************************************/


/* Basic                                                                         */


/*********************************************************************************/

body {
  background: #F8F8F8;
}

body,
input,
textarea,
select {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 17pt;
  line-height: 1.75em;
  color: #888;
  -webkit-text-stroke: 0.1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #666;
  margin: 0 0 1em 0;
  font-weight: 100;
  line-height: 1.5em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #fff;
}

strong,
b {
  font-weight: 400;
  color: inherit;
}

.dark strong,
.dark b {
  color: #fff;
  color: rgba(255, 255, 255, 0.85);
}

em,
i {
  font-style: italic;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
  -moz-transition: border-bottom-color 0.25s ease-in-out;
  -webkit-transition: border-bottom-color 0.25s ease-in-out;
  -o-transition: border-bottom-color 0.25s ease-in-out;
  -ms-transition: border-bottom-color 0.25s ease-in-out;
  transition: border-bottom-color 0.25s ease-in-out;
}

a:hover {
  border-bottom-color: rgba(0, 0, 0, 0);
}

.dark a {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.dark a:hover {
  border-bottom-color: rgba(255, 255, 255, 0);
}

sub {
  position: relative;
  top: 0.5em;
  font-size: 0.8em;
}

sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}

hr {
  border: 0;
  border-top: solid 1px #e6e6e6;
  margin: 2em 0 2em 0;
}

.dark hr {
  border-top-color: rgba(255, 255, 255, 0.5);
}

blockquote {
  border-left: solid 0.25em #e6e6e6;
  padding: 1em 0 1em 2em;
  font-style: italic;
}

.dark blockquote {
  border-left-color: rgba(255, 255, 255, 0.5);
}

p,
ul,
ol,
dl,
table {
  margin-bottom: 1em;
}

p {
  text-align: justify;
}

header {
  margin-bottom: 1em;
}

header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
  margin: 0;
}

header p {
  display: block;
  margin: 0;
  padding: 0.25em 0 0.5em 0;
}

footer {
  padding-top: 1.5em;
}

br.clear {
  clear: both;
}

.featured {
  text-align: center;
}

.featured p {
  text-align: center;
}


/* Sections/Articles */

section,
article {
  margin-bottom: 3em;
}

section> :last-child,
article> :last-child {
  margin-bottom: 0;
}

section:last-child,
article:last-child {
  margin-bottom: 0;
}

.row>section,
.row>article {
  margin-bottom: 0;
}


/* Images */

.image {
  position: relative;
  display: inline-block;
  border: 0;
}

.image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('images/overlay.png');
}

.image img {
  display: block;
  width: 100%;
  border-radius: 0.5em;
}

.image.featured {
  display: block;
  width: 100%;
  margin: 0 0 2em 0;
}

.image.full {
  display: block;
  width: 100%;
}

.image.left {
  float: left;
  margin: 0 2em 2em 0;
}

.image.centered {
  display: block;
  margin: 0 0 2em 0;
}

.image.centered img {
  margin: 0 auto;
  width: auto;
}


/*********************************************************************************/


/* Header                                                                        */


/*********************************************************************************/

#header {
  position: relative;
  margin: 0;
  background: url('../images/bg-body.jpg');
  background-size: cover;
  background-position: center center;
  padding: 14em 0 14em 0;
  text-align: center;
  color: #fff;
}

#header:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('images/overlay.png');
}

#header>header,
#header>header p,
#header>footer {
  text-align: center;
  position: relative;
  z-index: 1;
}

#header header {}

#header header h1 {
  font-size: 2.25em;
  line-height: 1.25em;
  margin-bottom: 0;
}

#header header p {
  margin-top: 1.25em;
  font-weight: 100;
  padding: 0;
  font-size: 1.25em;
  line-height: 1.5em;
}

#header footer {
  padding-top: 1.5em;
}


/*********************************************************************************/


/* Main Sections                                                                 */


/*********************************************************************************/

.main {
  position: relative;
  margin: 0;
}

.main>header {
  /*background: #fff; */
  background: #000;
  text-align: center;
  padding: 5em 0 5em 0;
  margin: 0;
}

.main>header h2 {
  font-size: 2.25em;
  font-weight: 100;
  margin-bottom: 0;
}

.main>header p {
  margin: 2em 0 0 0;
  padding: 0;
  text-align: center;
}

.main>.content {
  padding: 6em 0 6em 0;
}

.main>.content>.container {}

.main>.content h3 {
  font-size: 1.5em;
}

.main>.content.dark {
  background: #433;
}

.main>.content.style1 {
  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #b39c68, #a56365, #412e4c);
}

.main>.content.style2 {
  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
}

.main>.content.style3 {
  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #5f796b, #3a4e59, #2f394e);
}

.main>.content.style4 {
  padding-top: 0;
  /*background: #fff; */
  background: #000;
}


/*********************************************************************************/


/* Footer                                                                        */


/*********************************************************************************/

#footer {
  position: relative;
  margin: 0;
  text-align: center;
  background: #000;
  padding: 4em 0 8em 0;
}

#footer .copyright {
  margin-top: 3em;
  font-size: 0.8em;
  color: #aaa;
}

#footer .copyright a {
  color: inherit;
}

#footer ul.icons {}

#footer ul.icons li {}

#footer ul.icons a {
  box-shadow: inset 0 0 0 1px #d6d6d6;
}

<html>

<head>
  <title>Hotspot Login</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link href="http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic" rel="stylesheet" type="text/css" />
  <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/init.js"></script>
  <noscript>
			<link rel="stylesheet" href="css/skel-noscript.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-wide.css" />
		</noscript>
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
  <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>

<body>

  <form name="sendin" action="$(link-login-only)" method="post">
    <input type="hidden" name="username" />
    <input type="hidden" name="password" />
    <input type="hidden" name="dst" value="$(link-orig)" />
    <input type="hidden" name="popup" value="true" />
  </form>

  <script type="text/javascript" src="/md5.js"></script>
  <script type="text/javascript">
    <!--
    function doLogin() {
      document.sendin.username.value = document.login.username.value;
      document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
      document.sendin.submit();
      return false;
    }
    //-->
  </script>



  <!-- Header -->
  <section id="header" class="dark">
    <header>
      <img src="images/logo.png">
      <h1>Welcome to This Hotspot</h1>
      <!---			<p>Please scroll down to log in</a></p> -->
      <font size="3"><u><a href="#fourth">Press Login</a></u></font>
    </header>
    <footer>
      <a href="#first" class="button scrolly">Guest Login</a>

    </footer>

  </section>