html - 使用响应式图像调整内容大小

标签 html css responsive-design

我使用的是横幅图片，它会根据屏幕的宽度调整大小。我想要覆盖图像并出现在图像下方的其他内容，以在图像改变大小时减少它的上边距。我应该怎么做？

header {
  background-color: #02a5da;
  text-align: center;
  color: #f7f7f7;
  position: absolute;
  width: 100%;
  top: 0;
  font-size: 12px;
}

@media only screen and (max-width: 959px) {
  .tpLogin {
    visibility: hidden;
  }
}

.navBar {
  background-color: #02a5da;
  text-align: center;
  position: absolute;
  top: 0;
  height: 45px;
}

.navLink {
  padding-top: 13px;
  padding-bottom: 9px;
}


/*Home*/

.tpLogin {
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
  border: 1px solid black;
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
}

@media only screen and (min-width: 960px) {
  .tpLogin {
    margin-top: 150px;
  }
  .homeInfo {
    margin-top: 200px;
  }
}

#username,
#password {
  max-width: 80%;
  margin-bottom: 20px;
  border: 2px solid black;
  padding: 5px 10px;
}

#btnSubmit {
  width: 40%;
  padding: 5px 20px;
  background-color: #404040;
  color: #f7f7f7;
}

.login {
  margin-bottom: 20px;
}

.banner {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
  margin-top: -105px;
}

.homeIcons {
  font-size: 40px;
}

.homeInfo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.homeInfoHeading {
  font-size: 26px;
}

.homeInfoText {
  padding-bottom: 50px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .textSplit {
    border-bottom: 4px solid #02a5da;
  }
  .iconPadding {
    margin-top: 40px;
  }
}

.last {
  margin-bottom: 50px;
}
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="navBar pure-u-5-5">
    <div class="pure-g">
      <div class="pure-u-6-24"></div>
      <a class="active pure-u-3-24 navLink" href='index.html'>
        <div class="navText">Home</div>
      </a>
      <a class="pure-u-3-24 navLink" href='about.html'>
        <div class="navText">About Me</div>
      </a>
      <a class="pure-u-3-24 navLink" href='service.html'>
        <div class="navText">Service</div>
      </a>
      <a class="pure-u-3-24 navLink" href='contact.html'>
        <div class="navText">Contact</div>
      </a>
      <div class="pure-u-6-24"></div>
    </div>
  </div>

  <img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />

  <div class="tpLogin">
    <h2>Already a Member?</h2>
    <form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
      <div class="validation">
      </div>
      <input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
      <input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
      <input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
    </form>
    <h3><a href="service.html">How do I become a member?</a></h3>
  </div>

  <div class="homeInfo pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-bullhorn homeIcons"></i>
      <h2 class="homeInfoHeading">Service</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-cogs homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Software</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3 last">
      <i class="fas fa-check-circle homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Goal</h2>
      <p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
  </div>

</body>

</html>

我创建了一个 JS Fiddle，因此您可以明白我的意思。 https://jsfiddle.net/xp7b8k8p/7/

最佳答案

你需要做到这一点，这样你就不会绝对定位你的形象。绝对定位不应该真正用于布局目的 - 它用于当您想要从文档的自然流中删除某些内容时(例如登录框)。

考虑到这一点，我改变了你的风格:

@media only screen and (max-width: 959px) {
  .tpLogin {
    visibility: hidden;
  }
}

.navBar {
  background-color: #02a5da;
  text-align: center;
  height: 45px;
}

.navLink {
  padding-top: 13px;
  padding-bottom: 9px;
}


/*Home*/

.tpLogin {
  text-align: center;
  border: 1px solid black;
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#username,
#password {
  max-width: 80%;
  margin-bottom: 20px;
  border: 2px solid black;
  padding: 5px 10px;
}

#btnSubmit {
  width: 40%;
  padding: 5px 20px;
  background-color: #404040;
  color: #f7f7f7;
}

.login {
  margin-bottom: 20px;
}

.banner {
  width: 100%;
  height: auto;
}
.banner-wrapper {
  position:relative;
}

.homeIcons {
  font-size: 40px;
}

.homeInfo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.homeInfoHeading {
  font-size: 26px;
}

.homeInfoText {
  padding-bottom: 50px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.last {
  margin-bottom: 50px;
}
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="navBar pure-u-5-5">
    <div class="pure-g">
      <div class="pure-u-6-24"></div>
      <a class="active pure-u-3-24 navLink" href='index.html'>
        <div class="navText">Home</div>
      </a>
      <a class="pure-u-3-24 navLink" href='about.html'>
        <div class="navText">About Me</div>
      </a>
      <a class="pure-u-3-24 navLink" href='service.html'>
        <div class="navText">Service</div>
      </a>
      <a class="pure-u-3-24 navLink" href='contact.html'>
        <div class="navText">Contact</div>
      </a>
      <div class="pure-u-6-24"></div>
    </div>
  </div>

  <div class="banner-wrapper">
    <img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />

    <div class="tpLogin">
      <h2>Already a Member?</h2>
      <form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
        <div class="validation">
        </div>
        <input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
        <input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
        <input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
      </form>
      <h3><a href="service.html">How do I become a member?</a></h3>
    </div>
  </div>

  <div class="homeInfo pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-bullhorn homeIcons"></i>
      <h2 class="homeInfoHeading">Service</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-cogs homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Software</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3 last">
      <i class="fas fa-check-circle homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Goal</h2>
      <p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
  </div>

</body>

</html>

关于html - 使用响应式图像调整内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49798574/

上一篇：css - Bootstrap 下拉菜单不支持悬停时的单个元素

下一篇：jquery - 如何在菜单中制作 Bootstrap 4 幻灯片推送内容 offcanvas？

相关文章：

javascript - 如何在屏幕上保持弹出模式的同时停止导航？

html - 如何使用 flexbox 使 Logo 居中？

html - 避免在响应部分裁剪 img(CSS 中加载的背景图像)

javascript - Bootstrap 菜单切换第一次单击无法正常工作

html - 输入虚线边框且笔画长度等于字符的文本

javascript - iPad 和 Android 浏览器中的 KineticJS Sprite 动画故障

javascript - 无法读取 selenium 中未定义的 innerHTML 认为元素已定义？

javascript - -webkit-transform 在 JavaScript 旋转动画中不起作用(无 JQuery)

CSS3 counter - 增加而不显示数字

css - 删除特定媒体查询的背景

©2024 IT工具网  联系我们