max-width在div.container-fluid上不起作用

Question

图1是我想要的结果，但我的结果是图2

如何使您的png适合div.container-fluid，如图1所示？

HTML代码：

  <!--Footer-->

  <div class="container-fluid w-100 footer" id="footer">
    <div class="container-fluid row">
      <h5 class="col-5 mt-5" id="availableforcontact">
        available for contact on 
        <br>
        saturdays and sundays
        <br>
        EST GMT -05:00
      </h5>
      
      <h5 class="col-3 mt-5" id="contactfooter">
        contact
        <br>
        <p id="location">Manila City, Philippines</p>
        <a href="" id="email">albaalecxavier@gmail.com</a>
      </h5>

      <h5 class="col-3 mt-5" id="socialfooter">
        social
        <br>
        <a href="" id="dribbblelink">dribble</a>
        <br>
        <a href="" id="linkedinlink">linkedin</a>
        <br>
        <a href="" id="twitterlink">twitter</a>
        <br>
        <a href="" id="instagramlink">instagram</a>
      </h5>
    </div>
    **<img src="images/Vector 2.png" alt="" id="redwave" class="w-100">   <!--THIS IS THE PROBLEM-->**
  </div>

CSS代码：

#redwave {
    max-width: 100%;
    max-height: 100%;
    object-fit: none;
}

Answer 1

#redwave的父div的CSS是什么？除非它有一个声明的宽度和高度，否则#redwave的100%将没有什么可计算的。如果你想使用一定百分比的视口，你可以使用vh而不是%，其中宽度为1vh ==为视口宽度的1%。如果你想让它占据父容器的一个百分比，那么你需要给父容器一个绝对值来计算百分比。

Answer 2

这些是我写的样式。

​

ul {
  margin: 0 auto;
  text-align: center;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 4px 50px;
}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
}

@media only screen and (max-width: 700px) {
  ul li {
  padding: 4px 20px;
  }
}

​

这是完整的代码

​

.wrapper{
  margin: 0;
  background-color: #fff;

}

header{
  height: 120px;
  padding: 4px;
}
header h1{
  font-family: "Amatic Sc";
  text-transform: uppercase;
  font-size: 50px;
  text-align: center;
  color: #000;
}

.btn {
  
  width: 10;
  height: 2px;
    padding: 1.375rem 2.625rem 1.375rem 2.625rem;
    border: 0.125rem solid #B49DF1;
    border-radius: 2rem;
    background-color: #B49DF1;
    color: #fff;
    font: 700 0.75rem/0 'Open Sans', arial, sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.btn:hover {
    background-color: #9876F3;
    border: 0.125rem solid #9876F3;
}




ul {
  margin: 0 auto;
  text-align: center;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 4px 50px;
}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
}

@media only screen and (max-width: 700px) {
  ul li {
  padding: 4px 20px;
  }
}

 <div class="wrapper">
        <header>
            <h1>Novaturient</h1> <!---- Next to this should be the button -->
        </header>
        <nav>
            <ul>
                <li class="one"><a href="#home">Home</a></li>
                <li class="two"><a href="#content">Content</a></li>
                <li class="three"><a href="#features">Features</a></li>
                <li class="four"><a href="#about">About</a></li>
                <li class="fice"><a href="#contact">Contact</a></li>
                
            </ul>
        </nav>
    </div>

​