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

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

转载作者：行者123 更新时间：2023-11-28 15:04:09

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

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 下拉菜单不支持悬停时的单个元素

文章推荐： ios - 如何使自定义 collectionview 单元格可见？

css - compass 式( ruby )编码错误
我刚刚更新了 Ruby，现在我在尝试启动 compass 时遇到以下错误: Encoding::CompatibilityError on line ["28"] of /usr/local/Cell
c++ - 有哪些小型、快速和轻量级的开源应用程序(µTorrent 式)？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
java - 如何修复 session 式 Java 程序
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
Android 相当于 iOS MobileSubstrate 式 Hook ？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
ios - iOS 中的可折叠/ Accordion 式 View
我正在尝试在我的 iOS 应用程序中开发可折叠/ Accordion 式的功能。这将是您可以在网站上找到的典型 FAQ 类型功能。我想点击标题，然后显示详细信息。因为这是帮助部分，只有几个项目，我认
web-services - 多个依赖资源的 REST 式 URI 设计
我正在尝试设计一个基于 REST 的 Web 服务来与我正在开发的农场动物管理系统进行交互。为了详细说明问题，我收藏了动物属于一个农场。每只动物都有自己的信息——例如姓名、身份证号、品种年龄等。因
javascript - Accordion 式 list 计数器 document.form[]
我有 3 种不同的表单，其中复选框数量不同，每个部分基本上代表一个表单，因此当用户选择该部分中的复选框时，它会显示他们在该部分的总金额中 checkout 了多少 HTML
python - 如何将多个 PDF 页面拼接成一个大 Canvas 式 PDF？
我有一份 32 页的 PDF 版家谱。与其将家谱全部放在一个非常大的 PDF 页面上(这是我想要的)，不如将其格式化为一组 8 个单独的美国信纸大小的页面应该在整个宽度上缝合； 4 行这样就完成了树。
maven - 通过 Maven 自动编译 compass 式 SASS 的最佳方法
指SASS implementation for Java? : 在 Maven 目标编译包中自动编译 compass-style.org 样式表的最佳方法是什么？我不想发送太多的自编译库，也不想通
wpf - 组合框、按钮和 ICommand 绑定(bind)(MVVM 式)
鉴于以下 XAML... 我正在寻找一种绑定(bind) ComboBox、Button 和 Command 的方法，以便当 ComboBox 的值更改时，在 Command 上调用 CanExe
javascript - 在 Ember.js 中实现 Accordion 式 View
在玩具应用程序中，我有一个显示所有帖子标题的“帖子”模板。当您单击每个标题时，我不想直接进入“显示” View ，而是直接内联展开该帖子的其余内容。我考虑过让 postRoute 重用 postsR
twitter-bootstrap - 他们是否提供了任何自定义的 Twitter Bootstrap 式 swagger-ui 实现？
我需要一些使用 Twitter Bootstrap 或其他响应式框架的自定义 Swagger-UI 实现。需要在我的移动设备上使用这样的 UI 测试我的 API，但 swagger-ui 不能很好地扩
javascript - JavaScript 中的 Java 式 OOP 和 jQuery 失败
我正在做一个项目，我真的在尝试编写面向对象的 JavaScript 代码。我刚刚开始阅读Douglas Crockford's JavaScript: The Good Parts我很快开始意识到用
java - 在 java 中使用 Bouncy CaSTLe 进行 block 式 RSA 加密
在 C# 中，我通过执行以下操作来加密文本数据(请注意我正在以 block ( block )的形式加密数据): public string EncryptData(string pu
wcf - 使用 Azure ACS 和 OAuth 2.0 的 Facebook 式 API 访问场景 : how to implement app authorization?
我正在构建一个社交网站，该网站将向全世界公开 REST API (WCF WebAPI)，以便任何开发人员都能够为该网站创建客户端应用程序、将其与其他服务集成等。我想为 API 实现 Faceboo

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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