个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 15:04:09 26 4
gpt4 key购买 nike

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

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/

26 4 0
文章推荐： javascript - 使元素移动，当它在屏幕末尾消失时使其再次出现在屏幕开头
文章推荐： jquery - 如何在菜单中制作 Bootstrap 4 幻灯片推送内容 offcanvas？
文章推荐： css - Bootstrap 下拉菜单不支持悬停时的单个元素
文章推荐： ios - 如何使自定义 collectionview 单元格可见？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com