调整大小后，图像有空白

问题描述 投票：0回答：1

我正在制作一个家庭自动化网站，我有一个看起来像车库门的图像;我正在使用图像作为按钮，我将它们放在一个表格中以帮助对它们进行排序。现在，当我调整.garage_door的大小并使其成为width: 20%;时，它仍然是空白的，就好像是全尺寸一样。我已经尝试了一切，包括调整填充和边距。

@charset "UTF-8";
/* Body */
body {
	font-family: source-sans-pro;
	background-color: #f2f2f2;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
}
/* Container */
.container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 1000px;
	background-color: #FFFFFF;
}
/* Navigation */
header {
	min-height: none;
    width: 100%;
	height: 6%;
	background-color: #E0115F;
	border-bottom: 1px solid #2C9AB7;
}
.logo {
	color: #fff;
	font-weight: bold;
	text-align: undefined;
	width: 45%;
	float: left;
	margin-top: 15px;
	margin-left: 25px;
	letter-spacing: 4px;
    font-size: 120%;
    overflow: hidden;
}
.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 4px;
	font-size: 50px;
}
.controls {
	padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
    position: relative;
    float: right;
    right: 15px;
    top: 5px;
    height: 85%;
    max-width: 7%;
    min-width: 4%;
}
.controls {
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
    position: relative;
}
.table_controls {
    border: 2px solid black;
		margin: 0px;
		padding: 0px;
		position: relative;
		float: center;
		right: 35px;
}

.light_on {
	position: relative;
	width: 75%;
}

.light_off {
	position: relative;
}

.garage_door {
	width: 20%;
	margin-right: 0px;
	padding-right: 0px;
}

/* Mobile */
@media (max-width: 515px) {
.logo {
	width: 75%;
	float: left;
	margin-top: 13px;
	margin-right: 0px;
    padding-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
    align: center;
    display: inline-block;
}
.pi_logo_top {
    position: relative;
    top: 5px;
    max-width: 20%;
    min-width: 10%;
}

.table_controls {
    border: 2px solid black;
		position: relative;
		right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<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>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
  function changeImageLights() {

      if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
      {
          document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
      }
      else
      {
          document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
      }
  }

  function changeImageGarage() {

      if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
      {
          document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
      }
      else
      {
          document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
      }
  }

  function changeImageLightsOut() {

      if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
      {
          document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
      }
      else
      {
          document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
      }
  }
</script>
</head>

<body>
 <div class="container">
  <header> <a href="">
    <h4 class="logo">Home Automation</h4>
    <img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
  </a>
  </header>
    <div class="controls">
      <table class="table_controls">
        <tr>
          <td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
          <td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
          <td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
        </tr>
      </table>
    </div>
</div>
</body>
</html>
html css html5
1个回答
1
投票

使用以下CSS，代码中的table_controls有一些重复的css。删除不需要的CSS。

@charset "UTF-8";
/* Body */
 body {
     font-family: source-sans-pro;
     background-color: #f2f2f2;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     font-style: normal;
     font-weight: 200;
}
/* Container */
 .container {
     width: 90%;
     margin-left: auto;
     margin-right: auto;
     height: 1000px;
     background-color: #FFFFFF;
}
/* Navigation */
 header {
     min-height: none;
     width: 100%;
     height: 6%;
     background-color: #E0115F;
     border-bottom: 1px solid #2C9AB7;
}
 .logo {
     color: #fff;
     font-weight: bold;
     text-align: undefined;
     width: 45%;
     float: left;
     margin-top: 15px;
     margin-left: 25px;
     letter-spacing: 4px;
     font-size: 120%;
     overflow: hidden;
}
 .hero_header {
     color: #FFFFFF;
     text-align: center;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     letter-spacing: 4px;
     font-size: 50px;
}
/* Hero Section */
 .pi_logo_top{
     position: relative;
     float: right;
     right: 15px;
     top: 5px;
     height: 85%;
     max-width: 7%;
     min-width: 4%;
}
.controls {
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
    padding-top: 5px;
    position: relative;
    height: 90px;
}
.table_controls {
    border: 2px solid black;
    margin: 0px;
    padding: 0px;
    position: relative;
    float: right;
}
 .light_on {
     position: relative;
     width: 75%;
}
 .light_off {
     position: relative;
}
 .garage_door {
     width: 20%;
     margin-right: 0px;
     padding-right: 0px;
}
/* Mobile */
 @media (max-width: 515px) {
     .logo {
         width: 75%;
         float: left;
         margin-top: 13px;
         margin-right: 0px;
         padding-right: 0px;
         margin-bottom: 0px;
         margin-left: 10px;
         align: center;
         display: inline-block;
    }
     .pi_logo_top {
         position: relative;
         top: 5px;
         max-width: 20%;
         min-width: 10%;
    }
}
<!doctype html>
<html lang="en-US">
   <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>Raspberry Pi Home Automation</title>
      <link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
      <script>var __adobewebfontsappname__="dreamweaver"</script>
      <script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
      <script>
         function changeImageLights() {
         
             if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
             {
                 document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
             }
             else
             {
                 document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
             }
         }
         
         function changeImageGarage() {
         
             if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
             {
                 document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
             }
             else
             {
                 document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
             }
         }
         
         function changeImageLightsOut() {
         
             if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
             {
                 document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
             }
             else
             {
                 document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
             }
         }
      </script>
   </head>
   <body>
      <div class="container">
         <header>
            <a href="">
               <h4 class="logo">Home Automation</h4>
               <img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
            </a>
         </header>
         <div class="controls">
            <table class="table_controls">
               <tr>
                  <td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
                  <td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
                  <td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
               </tr>
            </table>
         </div>
      </div>
   </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.