html - 使用媒体查询调整 Bootstrap Navbar Image Logo 大小

Question

我试图在我的导航栏左侧获得一个 Logo 以响应地调整大小，我已经尝试了几种我在此处找到的不同方法，但我没有运气。任何帮助表示赞赏。

我目前有@media 查询，但它们不起作用。我的代码； https://codepen.io/grabthereef/pen/WKVMEd

HTML

    <!--Nav -->
<nav class="navbar navbar-expand-md navbar-light fixed-top py-1">
  <div class="container">
    <a href="index.php" class="navbar-brand">
      <img class="img-fluid" src="img/ycal.png" alt="">
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="?page=why-choose-us" class="nav-link">Why Choose Us</a>
        </li>
        <li class="nav-item">
        <a href="?page=our-services" class="nav-link">Our Services</a>
        </li>
        <li class="nav-item">
        <a href="?page=remote-help" class="nav-link">Remote Help</a>
        </li>
        <li class="nav-item">
        <a href="?page=contact-us" class="nav-link">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar {
  box-shadow: 2px 2px 5px #3292a6;
  opacity: 0.9;
  background: #fff; }
.navbar .nav-item {
  font-size: 1.2rem;
  padding-right: 20px; }

 @media(max-width: 950px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

@media(max-width: 600px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

Answer 1

@media queries 你走在正确的轨道上。它们在您的示例中不起作用的唯一原因是您没有正确选择要调整大小的图像。

.ycal img 在类为 .ycal 的元素中选择一个图像标签，但在您的情况下这已经是您想要的图像。

所以更新选择器，它会工作得很好:

@media(max-width: 950px) {
    .ycal {
        width: 264px;
        height: 68px;
    }
}

您还可以查看 updated codepen .