欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

英雄圖像沒有擴展到90%的視圖高度- CSS/HTML問題

CSS
錢諍諍1年前7瀏覽0評論

我有一個問題，調(diào)整我的圖片元素，這是我的英雄形象。我想讓這個元素覆蓋我網(wǎng)頁上90%的視圖高度，但是到目前為止我所嘗試的一切都沒有成功。我已經(jīng)在CSS中應(yīng)用了90vh，但是好像沒有預期的效果

* {
  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  rel="stylesheet">
  <link rel="stylesheet"  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>

我真的很困惑為什么會發(fā)生這種情況，但我設(shè)法解決了它

我查看了您的CSS，發(fā)現(xiàn)您沒有使用img-fluid類，所以我嘗試添加以下CSS:

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

這似乎已經(jīng)成功了，英雄現(xiàn)在的比例很好。結(jié)果是你改變了父對象的大小，而不是圖像的大小，所以它沒有縮放。我添加的新CSS手動縮放圖像，并使用object-fit: cover填充所有內(nèi)容。這似乎能達到目的。

編輯:事實證明，你根本沒有改變父母的大小！的。HTML中從未使用過hero-image類。請在你的頁面中檢查其他類似的錯誤，我猜這不是唯一的一個。

https://jsfiddle.net/Lnawgbex/26/