将图像放置在超大屏幕上，而不是显示视频

时间：2020-07-23 09:51:58

标签： html css

嗨，我正在尝试让图像在小屏幕上显示时，我已经设法通过使用另一个问题的代码来做到这一点，但是我需要将图像放在超大屏幕上而不停止在更大屏幕上播放视频大于400-500px。将不胜感激正弦的指导，在此先感谢。我试图添加一个密码笔，可惜它对我不起作用。我添加了一个屏幕截图，显示了会发生什么希望对您有帮助。

jum image 

body {
  margin-top: 190px;
  font-size: 2.9vmin;
}

h1 {
  font-size: 4.5vmin;
}

h2 {
  font-size: 4.5vmin;
}

h3 {
  font-size: 4.5vmin;
}

.display-3 {
  font-size: 6.5vmin
}

.display-4 {
  font-size: 6.5vmin
}

.navbar {
  box-shadow: 2px 2px 5px #663735;
  opacity: 0.9;
  background: #fff;
}

.navbar .nav-item {
  font-size: 1.1rem;
}

img.logo {
  padding-top: 0px;
  padding-bottom: 30px;
  width: 300px;
  height: 180px;
}

.jumbotron {
  position: relative;
  overflow: hidden;
  background-color: black;
  opacity: 0.7;
  background-size: cover;
  min-width: 0;
}

.jumbotron video {
  position: absolute;
  z-index: 1;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.5;
}

.jumbotron .container {
  z-index: 2;
  position: relative;
}

#jumbotron-bg {
  display: none;
}

#video video {
  width: 100%;
}

@media (max-width: 500px) {
  #video {
    display: none;
  }
  #jumbotron-bg {
    display: block;
  }
}
<!DOCTYPE html>

<html lang="en">



<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
  <link rel="stylesheet" href="/bootstrap.css">
  <link rel="stylesheet" href="/style.css">
  <title>Law City | Home Page</title>
</head>
<section>

  <body id="home" data-spy="scroll" data-target="#main-nav">
    <nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
      <div class="container">
        <a href="index.html" class="navbar-brand">
          <img src="LogoTransparent (1).png" class="logo">
          <h3 class="d-inline align-middle"></h3>
        </a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="index.html" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#about" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="Manifesto.html" class="nav-link">Manifesto</a>
            </li>
            <li class="nav-item">
              <a href="home-page.html" class="nav-link">Blog</a>
            </li>
            <li class="nav-item">
              <a href="Opportunities.html" class="nav-link">Opportunities</a>
            </li>
            <li class="nav-item">
              <a href="Events.html" class="nav-link">Events</a>
            </li>
            <li class="nav-item">
              <a href="Gallery.html" class="nav-link">Gallery</a>
            </li>
            <li class="nav-item">
              <a href="Contact.html" class="nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</section>
<Section>
  <div class="jumbotron jumbotron-fluid container-fluid" style="align-items: center;">
    <div class="overlay"></div>
    <div class="inner">
      <div id="video">
        <video autoplay muted loop poster="#">    
          <source src="/thecity.mp4" type="video/mp4"/>
        </video>
      </div>
      <div class="container text-white py-3">
        <h1 class="display-3">LAW CITY</h1>
        <p class="lead">Connecting future lawyers with the legal sector in the city of London</p>
        <div>
          <ul class="social_Jumbotron_ul">
            <li><a href="https://www.facebook.com/111912483818994/posts/124800495863526/?vh=e"><i class="fab fa-facebook-f" style="color: black;"></i></a></li>

            <li><a href="https://twitter.com/lawcity_/status/1259852447989796864?s=21"><i class="fab fa-twitter" style="color: black;"></i></a></li>


            <li><a href="https://www.linkedin.com/posts/law-city_lawcity-legalcareer-opportunity-activity-6665618719718408194-BFNF"><i class="fab fa-linkedin" style="color: black; "></i></a></li>


            <li><a href="https://www.instagram.com/p/CADQFm7JFhY/?igshid=a4ri79d8mpce"><i class="fab fa-instagram" style="color: black;"></i></a></li>
          </ul>
        </div>
      </div>
      <hr class="my-4">
    </div>
    <!-- /.container -->
    <div id="jumbotron-bg">
      <img src="citylon.jpg">
    </div>
  </div>
  <!-- /.jumbotron -->
</Section>

1 个答案:

答案 0 :(得分：0)

原来我设法通过在CSS中玩游戏来解决了它！是的！

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
  <link rel="stylesheet" href="/bootstrap.css">
  <link rel="stylesheet" href="/style.css">
  <title>Law City | Home Page</title>
</head>
<section>
<body id="home" data-spy="scroll" data-target="#main-nav">
  <nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
    <div class="container">
      <a href="index.html" class="navbar-brand" >
        <img src="LogoTransparent (1).png" class="logo">
        <h3 class="d-inline align-middle"></h3>
      </a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="Manifesto.html" class="nav-link">Manifesto</a>
          </li>
          <li class="nav-item">
            <a href="home-page.html" class="nav-link">Blog</a>
          </li>
          <li class="nav-item">
            <a href="Opportunities.html" class="nav-link">Opportunities</a>
          </li>
          <li class="nav-item">
            <a href="Events.html" class="nav-link">Events</a>
          </li>
          <li class="nav-item">
            <a href="Gallery.html" class="nav-link">Gallery</a>
          </li>
          <li class="nav-item">
            <a href="Contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</section>
  <Section>
  <div class="jumbotron jumbotron-fluid container-fluid"  style="align-items: center;">
    <div id="jumbotron-bg"> 
        
      <img src="citylon.jpg">
    </div>
    <div class="overlay"></div>
    <div class="inner">
      <div id="video">
    <video autoplay muted loop poster="#">    
      <source src="/thecity.mp4" type="video/mp4"/>
    </video>
  </div>
      <div class="container text-white py-3" >
     


    body {
  margin-top: 190px; 
    font-size: 2.9vmin;
    
 }
 h1 {
  font-size: 4.5vmin;
}
h2 {
  font-size: 4.5vmin;}

  h3 {
    font-size: 4.5vmin;}

    .display-3 {font-size: 6.5vmin}
    .display-4 {font-size: 6.5vmin}


.navbar {
  box-shadow: 2px 2px 5px #663735;
  opacity: 0.9;
  background: #fff; }
  .navbar .nav-item {
    font-size: 1.1rem;
  
  
  }
  img.logo {
    padding-top: 0px;
    padding-bottom: 30px;
    width: 300px;
    height: 180px;
}

   

  .jumbotron {
  position: relative;
  overflow: hidden;
  background-color:black;
  
  
  opacity:0.7;
  background-size: cover;
  min-width: 0;
}


.jumbotron video {
  position: absolute;
  z-index: 1;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  width:100%;
  height:100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity:0.5;
}
.jumbotron .container {
  z-index: 2;
  position: relative;
}



#jumbotron-bg {
  display: none;
}
#video video{
    width:100%;
}
@media (max-width: 500px) {
  #video {
    display: none;
  }
  #jumbotron-bg {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    width:100%;
    height:100%;
    /*  object-fit is not supported on IE  */
    object-fit: cover;
    opacity:0.5;
    
  }
}
相关问题
最新问题