时间戳

首页 > 解决方案 > Bootstrap Navbar Image logo 使用媒体查询调整大小

html - Bootstrap Navbar Image 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;
  }
}

标签： htmlcssmedia-queries

解决方案

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

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

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

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

您还可以查看更新后的 codepen。

推荐阅读