我有一个问题，调整我的图片元素，这是我的英雄形象。我希望这个元素能覆盖我网页上90%的视图高度，但到目前为止，我所尝试的一切都没有成功。我已经在CSS中应用了90 vh，但它似乎并不像预期的那样工作

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

:root {
  --white-color: #FFFDFA;
  --black-color: rgb(71, 71, 71);
  --brodtext-color: rgb(17, 17, 17);
  --blue-color: #070e18;
}

.hero-image {
  height: 90vh;
  width: 100%;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: var(--white-color)
}

nav {
  width: 100vw;
  height: 3.5rem;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.burger-container {
  position: absolute;
  right: 1rem;
  top: 0.1rem;
  display: inline-block;
  height: 50px;
  width: 50px;
  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  user-select: none;
  z-index: 999;
  -webkit-tap-highlight-color: transparent;
}

#burger {
  position: relative;
  top: 50%;
  width: 18px;
  height: 8px;
  display: block;
  margin: -4px auto 0;
}

.bar {
  position: relative;
  width: 100%;
  height: 1px;
  display: block;
  background: var(--black-color);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}

.topBar {
  transform: translateY(0px) rotate(0deg);
}

.btmBar {
  transform: translateY(6px) rotate(0deg);
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
  background: var(--white-color);
  height: 100%;
  list-style: none;
}

.menu-item {
  transform: translateY(-200px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.menu-item a {
  display: block;
  position: relative;
  color: var(--black-color);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 2.35;
  width: 100%;
}

.menu-item a:hover {
  color: var(--blue-color);
  text-decoration: none;
}

nav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100vw;
  height: 3.5rem;
  background-color: var(--white-color);
}

.nav-menu {
  height: 3.5rem;
  transition: height 0.4s;
}

.nav-menu.menu-opened {
  transition: height 0.4s;
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
}

.nav-menu.menu-opened .burger-container {
  transform: rotate(90deg);
}

.nav-menu.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}

.nav-menu.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}

.nav-menu.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}

.nav-menu.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
  opacity: 1;
}

h2 {
  color: var(--blue-color);
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.stycke {
  margin-bottom: 2rem;
}

.site-footer {
  background-color: var(--blue-color);
  margin-top: 5rem;
  padding: 5rem 0 2rem;
  font-size: 15px;
  line-height: 24px;
  color: var(--white-color);
}

.site-footer hr {
  border-top-color: var(--white-color);
  opacity: 0.5
}

.site-footer h6 {
  color: var(--white-color);
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 2px
}

.footer-links li {
  display: flex;
}

.footer-links a {
  color: var(--white-color);
}

@media only screen and (min-width: 769px) {
  .burger-container {
    right: 2rem;
  }
}

@media only screen and (min-width: 1000px) {
  .burger-container {
    display: none;
  }
  .menu {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: fixed;
    width: 100vw;
    height: 3.5rem
  }
  .menu-item {
    transform: scale(1) translateY(0px);
    padding: 1rem;
  }
  .menu-item a {
    font-size: 0.9rem;
  }
}

<!DOCTYPE html>
<html lang="sv">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slutprojekt</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>
  <nav>
    <div class="nav-menu">
      <div class="burger-container">
        <div id="burger">
          <div class="bar topBar"></div>
          <div class="bar btmBar"></div>
        </div>
      </div>
      <ul class="menu">
        <li class="menu-item"><a href="index.html">Hem</a></li>
        <li class="menu-item"><a href="html/lagarpanatet.html">Lagar på nätet</a></li>
        <li class="menu-item"><a href="html/losenord.html">Lösenordshantering</a></li>
        <li class="menu-item"><a href="html/sakerhetshot.html">Säkerhetshot</a></li>
        <li class="menu-item"><a href="html/statligk.html">Statlig kontroll</a></li>
        <li class="menu-item"><a href="html/webbhotell.html">Webbhotell</a></li>
        <li class="menu-item"><a href="html/tredjepartskod.html">Tredjepartskod</a></li>
      </ul>
    </div>
  </nav>

  <div class="hero-section d-flex justify-content-center">

    <picture>
      <source srcset="bilder/heroimage-mobile.jpg" media="(max-width: 500px)">
      <source srcset="bilder/heroimage-tablet.jpg" media="(max-width: 1000px)">
      <source srcset="bilder/heroimage-desktop.jpg" media="(min-width: 1001px)">
      <img src="bilder/heroimage-desktop.jpg" alt="heroimage" class="img-fluid">
    </picture>

    <div class="hero-text text-center">
      <h1>Introduktion</h1>
      <p>En översiktlig introduktion till webbplatsen och dess syfte att informera om lagar och säkerhet på näetet.</p>
    </div>

  </div>

  <main class="container">
    <h2 class="huvudrubrik">
      Lorem, ipsum dolor
    </h2>
    <div class="stycke">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod ad excepturi voluptate dignissimos vero nesciunt, eveniet atque fugiat maxime porro perferendis blanditiis libero, debitis, illo eius dolore saepe non. Illum nobis modi incidunt, vero exercitationem
      explicabo totam unde, blanditiis deleniti reprehenderit maiores similique tempora animi placeat natus molestias commodi nemo ut dolore. Aut unde, consequuntur saepe esse, atque voluptatibus quae inventore necessitatibus voluptates ut fugiat neque
      alias quibusdam corrupti natus assumenda doloribus quas vitae? Id nobis obcaecati exercitationem magnam pariatur dolores voluptatem delectus asperiores, natus aliquid debitis vel doloremque! Rerum exercitationem sed eos voluptates quasi nesciunt
      commodi aliquam ipsam soluta?
    </div>
    <div class="stycke">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod ad excepturi voluptate dignissimos vero nesciunt, eveniet atque fugiat maxime porro perferendis blanditiis libero, debitis, illo eius dolore saepe non. Illum nobis modi incidunt, vero exercitationem
      explicabo totam unde, blanditiis deleniti reprehenderit maiores similique tempora animi placeat natus molestias commodi nemo ut dolore. Aut unde, consequuntur saepe esse, atque voluptatibus quae inventore necessitatibus voluptates ut fugiat neque
      alias quibusdam corrupti natus assumenda doloribus quas vitae? Id nobis obcaecati exercitationem magnam pariatur dolores voluptatem delectus asperiores, natus aliquid debitis vel doloremque! Rerum exercitationem sed eos voluptates quasi nesciunt
      commodi aliquam ipsam soluta?
    </div>
    <div class="stycke">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod ad excepturi voluptate dignissimos vero nesciunt, eveniet atque fugiat maxime porro perferendis blanditiis libero, debitis, illo eius dolore saepe non. Illum nobis modi incidunt, vero exercitationem
      explicabo totam unde, blanditiis deleniti reprehenderit maiores similique tempora animi placeat natus molestias commodi nemo ut dolore. Aut unde, consequuntur saepe esse, atque voluptatibus quae inventore necessitatibus voluptates ut fugiat neque
      alias quibusdam corrupti natus assumenda doloribus quas vitae? Id nobis obcaecati exercitationem magnam pariatur dolores voluptatem delectus asperiores, natus aliquid debitis vel doloremque! Rerum exercitationem sed eos voluptates quasi nesciunt
      commodi aliquam ipsam soluta?
    </div>
    <div class="stycke">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod ad excepturi voluptate dignissimos vero nesciunt, eveniet atque fugiat maxime porro perferendis blanditiis libero, debitis, illo eius dolore saepe non. Illum nobis modi incidunt, vero exercitationem
      explicabo totam unde, blanditiis deleniti reprehenderit maiores similique tempora animi placeat natus molestias commodi nemo ut dolore. Aut unde, consequuntur saepe esse, atque voluptatibus quae inventore necessitatibus voluptates ut fugiat neque
      alias quibusdam corrupti natus assumenda doloribus quas vitae? Id nobis obcaecati exercitationem magnam pariatur dolores voluptatem delectus asperiores, natus aliquid debitis vel doloremque! Rerum exercitationem sed eos voluptates quasi nesciunt
      commodi aliquam ipsam soluta?
    </div>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <h6>Om webbsidan</h6>
          <p class="text-justify">Denna webbplats är en del av ett skolprojekt om lagar på nätet och syftar till att öka medvetenheten om viktiga frågor kring säkerhet och integritet online. Här hittar du information om lösenordshantering, säkerhetshot, statlig övervakning och
            mycket mer.</p>
        </div>

        <div class="col-xs-6 col-md-3">
          <h6>Länkar</h6>
          <div class="row custom-row-margin">
            <div class="col-md-6">
              <ul class="footer-links">
                <li><a href="index.html">Hem</a></li>
                <li><a href="html/lagarpanatet.html">Lagar på nätet</a></li>
                <li><a href="html/losenord.html">Lösenordshantering</a></li>
                <li><a href="html/sakerhetshot.html">Säkerhetshot</a></li>
              </ul>
            </div>
            <div class="col-md-6">
              <ul class="footer-links">
                <li><a href="html/statligk.html">Statlig kontroll</a></li>
                <li><a href="html/webbhotell.html">Webbhotell</a></li>
                <li><a href="html/tredjepartskod.html">Tredjepartskod</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-sm-6 col-xs-12">
              <p class="copyright-text">Copyright &copy; 2023 Jacob Engardt.</p>
            </div>
          </div>
        </div>
  </footer>

</body>

我尝试使用CSS属性height：在我的.hero-image类上使用90 vh，使其覆盖90%的视图高度。我期望图像相应地调整大小，并占据网页上的大部分垂直空间。但是，图像未按预期缩放，并且其高度未达到视图高度的所需90%。

1条答案

按热度按时间

dba5bblo1#

我真的很困惑为什么会这样，但我设法解决了它
我看了你的CSS，发现你没有对img-fluid类做任何事情，所以我尝试添加以下CSS：

img.img-fluid{
  height: 90vh;
  width: 100vw;
  object-fit: cover;
}

这似乎已经做到了这一点，英雄的规模现在很好。原来你改变的是父对象的大小，而不是图像的大小，所以它没有缩放。我添加的新CSS手动缩放图像，并使其用object-fit: cover填充所有内容。这似乎是做的把戏。
编辑：原来，你根本没有改变父母的大小！.hero-image类从不在HTML中使用。请检查您的页面中是否有其他类似的错误，我猜这不是唯一的一个。
jsfiddle：https://jsfiddle.net/Lnawgbex/26/

赞(0）回复(0）举报 2023-05-19

英雄图像未扩展到视图高度的90%- CSS/HTML问题

1条答案

相关问题

热门标签

最新问答