Question

我们正在为此页面使用BootStrap和JavaScript，但我们不确定如何使页脚图像响应。页面上的其他元素是响应的，但它只是页脚图像。

我已经包含了整个HTML和CSS代码。

＆＃13;

/* CSS Document  */

@font-face {
  font-family: futura;
  src: url("../fonts/Futura-Book.ttf");
}
@font-face {
  font-family: futura italic;
  src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
  font-style: italic, oblique;
}
table {
  border-collapse: collapse;
}
.Line {
  border-bottom: 3px solid #6e6e9a;
}
#white {
  color: white;
}
/*--------------------------------ALL PAGES----------------------------------------*/

/*Body Style*/

* {
  font-family: futura, verdana;
  box-sizing: border-box;
}
h1 {
  font-family: futura, verdana;
  text-align: center;
  font-size: 24px;
}
p {
  font-size: 14px;
}
th {
  font-size: 16px;
}
td {
  font-size: 14px;
}
body {
  margin: auto;
  min-width: 600px;
}
/*NAVIGATION STYLE*/

nav {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  background-color: #4a486d;
  margin: 0 auto;
  min-width: 100px;
  max-width: 950px;
  text-align: center;
}
#navcontainer {
  width: 100%;
  background-color: #4a486d;
}
#search {
  width: 20px;
  height: 15px;
  padding-right: 6px;
}
nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav a:hover {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
nav a:visited {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
/*JUMBOTRON STYLE*/

.jumbotron {
  text-align: center;
  border-radius: 25px;
  background-color: white;
  padding: 0px;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 30px;
  clear: both;
}
#logo {
  width: 240px;
  height: 140px;
}
/*CONTAINER STYLE*/

.container {
  text-align: center;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
}
/*BACKGROUND COLOR*/

#backcol {
  height: 100%;
}
/*LEFT LINKS STYLING*/

#sidenav {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  width: 16%;
  background-color: #f5f4f9;
  position: absolute;
  height: 55%;
  overflow: auto;
  clear: both;
  text-align: left;
  float: left;
  border-radius: 2px;
}
li a {
  display: block;
  color: #1c1c1c;
  padding: 8px 0 0px 25px;
  text-decoration: none;
  padding: 8px;
}
li a.active {
  text-decoration: none;
  font-weight: bold;
}
li a:hover:not(.active) {
  background-color: #1c1c1c;
  color: white;
  text-decoration: none;
}
#leftNavPadding {
  padding: 10px;
}
#searchbar {
  height: 15px;
  width: 15px;
  margin: 1px;
}
#quick {
  border-radius: 2px;
  padding: 0;
  position: absolute;
  clear: both;
  float: left;
}
/*PIC STYLING*/

#pic {
  width: 50%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
}
#pic2 {
  width: 30%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
  padding-top: 45px;
  padding-bottom: 57px;
}
/*BUTTON STYLE*/

button {
  background-color: #6e6e9a;
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  border-radius: 2px;
  margin: 4px;
}
button:hover {
  background-color: #1c1c1c;
}
.vpButton {
  padding-top: 0px;
}
.profilesButton {
  margin-top: 0px;
}
/*FORM STYLE*/

form {
  text-align: center;
  padding-top: 60px;
}
label.formLabel {
  display: block;
  margin: 10px;
  padding: 10px;
  margin: 0 auto;
  width: 300px;
  font-size: 16px;
  font-weight: bold;
}
#fieldset {
  margin-top: -30px;
  border: 2px solid #515078;
}
#legend {
  color: #515078;
  font-size: 18px;
}
#fieldsetBorder {
  border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
  border: 1px dashed #8685a7;
}
#legendLeft {
  text-align: left;
}
.astrex {
  color: red;
}
.trcolor {
  background-color: #8a87a2;
}
/*FOOTER*/

footer {
  background-color: #b1b2d2;
  color: #1c1c1c;
  text-align: center;
  height: 158px;
  clear: both;
  margin-top: 10px;
}
footer p {
  margin-right: 150px;
  padding-top: 60px;
}
#footlogo {
  float: left;
  margin-left: 0px;
  height: 130px;
  width: 188px;
  margin: 1%;
  padding: 10px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/

.socialMediaButtons {
  float: right;
  margin: 1%;
  padding-top: 40px;
}
.socialMediaButtons:hover {
  background-color: #1c1c1c;
}
/*CONTAINER STYLE*/

#containerWidth {
  width: 960px;
}
/*PROFILE PAGE STYLE*/

#title {
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
#title2 {
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
#title3 {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
}
#title4 {
  color: white;
  font-weight: bold;
  font-size: 16px;
  padding-top: 25px;
  text-align: left;
  padding-left: 20px;
}
#text {
  color: white;
  font-size: 14px;
  text-align: left;
  padding-left: 20px;
}
.topPad {
  padding-top: 40px;
}
.bottomMargin {
  margin-bottom: 800px;
}
.Line td {
  border-bottom: 1px solid #6e6e9a;
}
#enquiryType,
#travel,
#personalMessage,
#optionalMessage {
  padding: 3px;
  margin: 10px;
}
#spaceBottom {
  margin-bottom: 20px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------INDEX PAGE----------------------------------------*/

#arrow {
  float: left;
  padding: 10px;
  margin: 10px;
  position: relative;
}
#introheading {
  font-family: futura bold;
  color: white;
  font-size: 50px;
  padding-top: 10px;
}
#introtext {
  padding: 10px;
  margin: 10px;
  font-family: Futura, sans-serif;
  font-size: 15px;
  color: white;
  text-align: justify;
  line-height: 1.5em;
}
#heximages {} #hexstyle {
  height: 18%;
  width: 18%;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}
#back {
  padding-top: 20px;
  padding-bottom: 150px;
  margin-bottom: 0px;
}
#col {
  background-color: #555b8f;
}
/*---------------------------------------------------------------------*/

/*--------------------------------LOGIN PAGE START----------------------------------------*/

#divContainer2 {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: relative;
}
#introDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  padding-top: 120px;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
/*BUTTON STYLING*/

.buttonlayout {
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  font-size: 18px;
  font-family: futura;
  margin: 10px auto;
}
#guestButton {
  margin-top: -1px;
  padding: -3.5px -3px;
}
.displayBlock {
  display: block;
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: futura;
}
#logInDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  padding-top: 80px;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#logInForm {
  margin: 0 auto;
  width: 350px;
}
input.form {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#registerDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#registerForm {
  text-align: center;
  margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/

/*--------------------------------MY PROFILE----------------------------------------*/

/* hide nav button */

#hide {
  float: left;
  left: 0px;
  top: 0px;
  margin: 5px;
}
.clear {
  clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/

svg {
  width: 19%;
  stroke: #8e8db7;
  stroke-width: 4;
}
#profileInfo {
  width: 90%;
  height: 750px;
  background-color: #6a6cae;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  padding: 10px;
}
.profileback {
  text-align: center;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
  background-image: url(../images/back.jpg);
  background-repeat: no-repeat;
}
input[type="file"] {
  display: none;
}
.custom-file-upload {
  padding: 6px 12px;
  cursor: pointer;
  background-color: none;
  position: absolute;
  right: 70px;
  width: 54px;
}
#marginBottom {
  margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------POD SEARCH PAGE START---------------------------------------*/

#basictxt {
  text-align: left;
  padding: 11px;
  padding-bottom: 24px;
  margin: 5px;
}
#quote {
  text-align: left;
  color: #4a486d;
  font-size: 16px;
  padding: 10px;
  padding-top: 65px;
}
.hireButton {
  padding-top: 5px;
  width: 70px;
  padding: 5px;
}
#hireSize {
  width: 70px;
  height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/

/*--------------------------------POD PROFILE PAGE START----------------------------------------*/

#enquire {
  width: 150px;
  height: 50px;
  margin: 0px;
  margin-top: -10px;
  margin-bottom: 50px;
}
#divContainer {
  width: 700px;
  height: 700px;
  margin: 0 auto;
  margin-bottom: 5%;
}
#skills {
  width: 330px;
  height: 750px;
  background-color: #6e6e9a;
  margin: 0 auto;
  float: left;
  z-index: 2;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
#skilllist {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
  list-style-type: none;
}
#bio {
  width: 330px;
  height: 750px;
  background-color: #8a83d1;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 3;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  padding: 10px;
}
#workHistory {
  width: 330px;
  height: 750px;
  background-color: #6a6cae;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 1;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/

/*--------------------------------BOOK NOW PAGE START----------------------------------------*/

label {
  display: inline-block;
  width: 220px;
  font-size: 16px;
  font-weight: bold;
}
input.form1 {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#booknowFieldset {
  border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/

/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/

#currentBookingTable,
.bookingtr,
.bookingtd {
  text-align: center;
  margin: 10px;
}
.bookingtd {
  max-width: 400px;
  min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/

/*--------------------------------HISTORIC BOOKING----------------------------------------*/

#Table,
th,
td {
  margin: 10px;
  padding: 10px;
}
/*TABLE STYLING*/

table,
th,
td {
  text-align: center;
  margin: 10px;
  margin-left: 20%;
}
td {
  max-width: 300px;
  min-width: 100px;
  min-height: 300%;
  margin: 10px;
  background-color: white;
}
th {
  padding: 10px;
  color: white;
}
/*---------------------------------------------------------------------*/

/*--------------------------------CONTACT US----------------------------------------*/

input.inputstyle {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#color {
  background-color: white;
}
/*---------------------------------------------------------------------*/

＆＃13;

<!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.0" />
  <title>Login page</title>
  <!-- Bootstrap core CSS -->
  <link href="bootstrap.min.css" rel="stylesheet">


  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="ie10-viewport-bug-workaround.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="offcanvas.css" rel="stylesheet">

  <link rel="stylesheet" href="stylesheets/stylesheetnew.css" type="text/css" />


  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body id="backColor">
  <nav class=" navbar-fixed-top navbar-inverse" style="background-color:#4a486d">
    <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>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href='my-profile.html' style="color:red">My Profile</a> 
            <li><a href='pod-search.html'>POD Search</a>
            </li>
            <li> <a href='current-bookings.html'>Current Bookings</a> 
            </li>
            <li> <a href='historic-bookings.html'>Historic Bookings</a>
            </li>
            <li><a href='contact-us.html'>Contact Us</a> 
            </li>
            <li><a href='index.html'>Log Out</a> 
            </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <!-- /.navbar -->


  <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-xs-12">



      <div class="row">
        <div class="col-sm-5">
          <img src="images/arrowtest.png" id="arrow" class="img-responsive" />
        </div>

        <div class="col-sm-7">
          <h1 id="introheading"> Hello,<br>Welcome to Pod</h1>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>
        </div>
      </div>


      <div class="row">
        <div class="col-xs-12 col-lg-12">

          <div class="text-center">
            <img id="hexstyle" src="images/seed.png" alt="logo" />


            <img id="hexstyle" src="images/nurture.png" alt="logo" />


            <img id="hexstyle" src="images/grow.png" alt="logo" />
          </div>

        </div>
        <!--/.col-xs-6.col-lg-4-->



      </div>
      <!--/row-->
    </div>
    <!--/.col-xs-12.col-sm-9-->


  </div>
  <!--/row-->


  <footer>

    <div class="row">

      <div class="col-md-4 col-xs-4">
        <img src="images/logo.png" id="footlogo" class="img-responsive" />
      </div>

      <div class="col-md-4 col-xs-4">
        <p id="white">&copy; SharpFutures 2016 / other info</p>
      </div>



      <div class="col-md-4 col-xs-4">

        <a href="https://www.youtube.com/channel/UCl3eUMCjIUcDAgyJDi0lalA" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/youtube-logo-white.png" onmouseover="this.src='images/social-media-buttons/youtube-logo-red.png'" onmouseout="this.src='images/social-media-buttons/youtube-logo-white.png'" />
        </a>

        <a href="https://www.facebook.com/groups/174646469548854/" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/facebook-logo-white.png" onmouseover="this.src='images/social-media-buttons/facebook-logo-blue.png'" onmouseout="this.src='images/social-media-buttons/facebook-logo-white.png'" />
        </a>

        <a href="https://twitter.com/SharpFutures" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/twitter-logo-white.png" onmouseover="this.src='images/social-media-buttons/twitter-logo-blue.png'" onmouseout="this.src='images/social-media-buttons/twitter-logo-white.png'" />
        </a>

        <a href="contact-us.html" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/email-logo-white.png" onmouseover="this.src='images/social-media-buttons/email-logo-purple.png'" onmouseout="this.src='images/social-media-buttons/email-logo-white.png'" />
        </a>
      </div>

    </div>







    </div>



    <!--ADDED IN THE ACTUAL COPYRIGHT SYMBOL-->






  </footer>

  <!--/.container-->


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="ie10-viewport-bug-workaround.js"></script>
  <script src="offcanvas.js"></script>
</body>

</html>

＆＃13;

Answer 1

您可以使用以下内容。

<img class="img-responsive" src="/path/to/image/file">

你也可以检查bootstrap

http://getbootstrap.com/css/#images

Answer 2

看起来你已经在css中设置了宽度和高度：

#footlogo {
  float: left;
  margin-left: 0px;
  height: 130px;
  width: 188px;
  margin: 1%;
  padding: 10px;
}

您是否尝试过移除此功能并应用＆＃34; img-responsive＆＃34;？

Answer 3

将尺寸（宽度和高度）添加到图像的容器中，然后添加宽度：100％;到img元素本身。

如何使页脚中的图像响应？

3 个答案: