Question

我的html如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
    </a>
</nav>

我的CSS像这样：

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('assets/images/logo-school-mobile.png');
    }
}

如果通过dekstop访问，则将其称为图像logo-school-icon.png和logo-school.png

如果通过移动设备访问，我想显示logo-school-icon.png并将logo-school.png更改为logo-school-mobile.png

我尝试那样，但是不起作用。如果访问了移动设备，则logo-school-icon.png和两个图像（logo-school.png和logo-school-mobile.png仍会出现。应该只显示logo-school-icon.png和logo-school-mobile.png

我该如何解决这个问题？

注意：我仍然找到解决方案。请正确阅读我的问题。我希望用演示（html + css）回答。谢谢

Answer 1

正如某些人回答的那样，您可以对每个图像标签应用一个类，然后根据它们显示的分辨率进行操作，但是您也可以使用：

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="icon" width="150" height="150">
        <img class="logo-school" src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="logo"  width="300" height="300">
    </a>
</nav>

CSS

@media (max-width:530px) {
  nav a img:nth-child(1) {
    display: none;
  }
}

@media (min-width:530px) {
  nav a img:nth-child(2) {
    display: none;
  }
}

只需调整图像源即可。

Answer 2

您应在桌面上显示的<img>中添加一个类名。然后将其设置为display: none;以进行移动视图。

@media (max-width: 530px) {
    .navbar-brand img.logo-school-desktop {
        display: none;
    }
    .navbar-brand .logo-school {
        background-image:url('assets/images/logo-school-mobile.png');
    }
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-desktop" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
    </a>
</nav>

Answer 3

您可以简单地使用媒体查询来实现这一目标

编辑：我似乎了解您的问题所在。希望此编辑能够解决您的问题。我添加了第三个img标签来显示和隐藏它，具体取决于您使用媒体查询时的屏幕尺寸

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-icon" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
       <img class="logo-school-mobile" src="{{ asset('assets/images/logo-school-mobile.png') }}" alt="logo">
    </a>
</nav>

@media (min-width: 320px) and (max-width: 530px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: none; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: block; // Use !important if you need to overide a style
        }

}

@media (min-width: 531px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: block; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: none; // Use !important if you need to overide a style
        }

}

Answer 4

我看到您已经更新了问题。现在更清楚了。试试这个代码，对我有用。

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
      <img class="logo-school" width="300" height="300">
    </a>
</nav>

CSS

.logo-school {
  display: block;
  background-size: contain;
}

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930');
    }
}

@media (min-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://www.schoolbrandingmatters.co.nz/wp-content/uploads/2018/11/Whitau-School-Logo-2.jpg');
    }
}

只需调整图片的背景网址即可。

这是工作笔-https://codepen.io/grbawork/pen/ZNbzrZ

通过手机访问时，如何更改徽标的背景图片？

4 个答案: