Как изменить фоновое изображение логотипа при доступе с мобильного телефона? - PullRequest
Новая
       24

Как изменить фоновое изображение логотипа при доступе с мобильного телефона?

0 голосов
/ 06 мая 2019

Мой 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');
    }
}

Если получить доступ по декстопу, назовите image 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). Спасибо

Ответы [ 4 ]

1 голос
/ 06 мая 2019

Как уже отвечали некоторые, вы можете применить класс к каждому из тегов изображения, а затем манипулировать разрешением, которое они отображают, но вы также можете использовать:

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;
  }
}

Просто настройте источники изображения на свои собственные.

0 голосов
/ 08 мая 2019

Я вижу, вы обновили свой вопрос.Теперь это более понятно.Попробуйте этот код, у меня работает.

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');
    }
}

Просто настройте фоновый URL для ваших изображений.

Вотрабочая ручка - https://codepen.io/grbawork/pen/ZNbzrZ

0 голосов
/ 06 мая 2019

Вы можете просто использовать медиа-запрос для достижения этого

Редактировать: Кажется, я понимаю, в чем ваша проблема. Надеюсь, что это изменение решит вашу проблему. Я добавил третий тег 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
        }

}
0 голосов
/ 06 мая 2019

Вы должны добавить имя класса к <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>
...