css - 调整大小后图像右侧有空白

标签 css html

我正在制作一个家庭自动化网站，我有一张看起来像车库门的图片；我将图像用作按钮，并将它们放在表格中以帮助对它们进行排序。现在，当我调整 .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>

最佳答案

使用以下 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>

关于css - 调整大小后图像右侧有空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55315061/

上一篇：html - Angular 7 - 更改侧边栏和元素 z-index

下一篇：javascript - 如何为当前转换 : translate() value? 编写 if 表达式

相关文章：

javascript - 为什么我的 onclick 事件不显示我的 JSON 文件？

javascript - 如何以隐藏方式启动我的 jquery 切换？

包含 CSS 元素的代码列表中没有灰色边框的 HTML 表格

javascript - 将 div 内容和样式输出到图像

css - z-index 和多个 !important 规则的问题

html - 仅 CSS : onHover, 更改所有具有 X 类的 div 的样式？

javascript - 如何使用按钮 onclick 隐藏一个 div 并显示另一个 div？

html - 如何使用 jquery mobile 以百分比设置 2 行高度？

javascript - IFrame根据浏览器的 "height" "width"调整

html - li 中的 float div 在 IE 中无法正确显示

©2024 IT工具网  联系我们