图像doen't不考虑整个页眉大小

Image doen't take whole the header size

本文关键字：不考虑 doen 图像      更新时间：2023-09-26

我想制作一个滑块，由3个图像组成，但我遇到了一个问题。

我想把图片放在头顶上。。我把导航条的高度设为0，把导航条放在标题上方。。

你可以看到代码，图像会向你展示我需要的

$('.header').height($(window).height());
.my-navbar
{
   
    height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        
              <div class="my-navbar">
                    <div class="my-container">
                            <div class="user">
                                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                <a href="#" class="upper">login</a>
                                <span class="separator">|</span>
                                <a href="#" class="upper">register</a>
                            </div>
                            <div class="clearfix"></div>
                            <div class="social">   <!-- social and search icon-->
                                 <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                 <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                                  <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
                            </div>
                            <div class="clearfix"></div>
                            <div class="links upper txcolor">
                                <a href="#">news</a>
                                <span>|</span>
                                <a href="#">download</a>
                                 <span>|</span>
                                <a href="#">usefull links</a>
                          </div>
                        </div>
            </div>
        
        
        
      <div class="header">
           
        
            
           <!--<div class="slider">
                <div class="my-container">
                    
                      <div class="slider-images">
                          
                     
                       </div>
                    <div class="slider-text">
                    <h3>Four Wheels move the body</h3>
                     <h1>  Two wheels move the soul</h1>
                        
                    </div>
                   
                
                </div>
            </div> -->
            
 
            <img src="images/motors/m1.png">
        </div> 
        
        
   
        
        
        <div class="menu">
        
                <img  src="images/logo.png" >
            
        
        </div>

.slider {
    height: 100vh;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    padding: 0;
    margin: 0;
}

根据滑块的显示属性，您可能还需要将其更改为display:table;

相关文章：