图像在较小的屏幕上显示不正确

Question

我正在尝试创建一个响应式网站，但我卡在一个地方，带有 background-imaged 掩码的图像无法正常运行。它在大屏幕上运行良好，但在中小屏幕上我的标题和一些图像在 "masked" 背景图像下看不到。那么你能告诉我我在哪里犯了错误吗？是编码错误还是方法错误？

这个page.You底部的屏幕显示图片在大屏幕上没有问题，但在其他屏幕上你看不到标题，只显示了一半的图片和背景不会拉伸以覆盖所有图片和标题！！！

enter link description here这个是website.You可以看清楚是什么问题

<!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!--Menü scroll change color-->
<script>
    $(document).ready(function(){
  $(window).scroll(function(){
   var scroll = $(window).scrollTop();
   if (scroll > 10) {
       $(".navbar").css("background", "black");
   }

   else{
       $(".navbar").css("background", "transparent");
   }
  })
})
    </script>
    <!--Menü scroll change color-->

html,
body,
header,
#intro {
    height: 100%;
    
}

#intro {
    background:  url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family:Arial;
}



.navbar-brand{
    font-family:      Gabriola;
    font-size:35px;
padding-top:10px;    
    
}

.navbar-nav li a  {
  color:white !important;
  font-family:   'Kristen ITC';
}

.fixed-top .navbar-nav  li a:hover {
    color: red !important;
}

.fixed-top .navbar-nav  li  a:focus {
    color: red !important;
}




.fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

 .fixed-top.scrolled .navbar-nav   li a  {
  color:red !important;
}


 .fixed-top.scrolled .navbar-nav   li a:hover {
    color: red !important;
} 




 .float{
 position:fixed;
 width:60px;
 height:60px;
 bottom:40px;
 right:40px;
 background-color:#25d366;
 color:#FFF;
 border-radius:50px;
 text-align:center;
  font-size:30px;
 box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
 margin-top:16px;
}

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

<head>
    <meta http-equiv="Content-Type" content="text/html; 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">
    <title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="css/ihover.css" >


</head>

<body>

    


    <!--Main Navigation-->
<header>
    
    <!--Navbar-->
    <nav  class="navbar navbar-expand-lg navbar-dark  fixed-top  ">
        <div class="container">

            <!-- Navbar brand -->
            <a class="navbar-brand red-text" href="#">BATU PARFÜM</a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

            <!-- Collapsible content -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <!-- Links -->
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item ">
                        <a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Bayan Parfüm</a>
                    </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Erkek Parfüm</a>
                    </li>
                         <li class="nav-item">
                        <a class="nav-link" href="#">Unisex Parfüm</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">İletişim</a>
                    </li>


                </ul>
                <!-- Links -->

                <!-- Social Icon  -->
<ul class="navbar-nav nav-flex-icons ">
    <li class="nav-item">
     <!--   <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a>  -->
        <a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
    </li>
</ul>
            </div>
            <!-- Collapsible content -->

        </div>
    </nav>
    <!--/.Navbar-->





    <!--Mask-->
<div  id="intro" class="view hm-black-strong  container-fluid ">
        
    <div class="container-fluid full-bg-img d-flex  align-items-center        justify-content-center   ">

        <div class="row container-fluid d-flex align-items-center     justify-content-center">

            <div class=" col-lg-8 col-md-8  col-sm-8  text-center ">
                 <hr class="hr-light   ">
                <!-- Heading -->
                <h1 class=" font-bold  mb-2       white-text">Kokunu Keşfet</h1>
                               <!-- Divider -->
                <hr class="hr-light pt-2   ">
                </div>
            

               <!--Grid row-->
    <div class="row col-lg-8 col-md-8  col-sm-8 container-fluid  text-center mt-5">

        <!-- Top to Bottom-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4   ">
            <h2 class="mb-4 font-weight-bold  white-text ">Unisex Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/perfume1.jpg" class="img-fluid" alt=""  style="border:3px solid white; ">
              <div class="mask"></div>
          </div>         
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4">
                        <h2 class="mb-4 font-weight-bold  white-text">Bayan Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
              <div class="mask"></div>
          </div>

      
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4">
                        <h2 class="mb-4 font-weight-bold  white-text">Erkek Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
              <div class="mask"></div>
          </div>

            </div>
   
        
        
        <!--Grid column-->
        </div>
    
    <!--Grid row-->
             </div>
      </div>
  </div>
<!--/.Mask-->

</header>
<!--Main Navigation-->
</body>

</html>

small screen

medium screen

large screen

Answer 1

您可以对较小的屏幕使用媒体查询。试试这个 css 手机：

header{
    height: auto;
}
#intro{
    padding: 0;
    height: auto;
}
.full-bg-img{
    position: relative;
}

图像在较小的屏幕上显示不正确

images are not displayed properly in smaller screens

css

mask

responsive-images

bootstrap-4