@YuraLons

Как заменить логотип?

Столкнулся с проблемой следующего характера:

Имеется два логотипа в папке img/logo/

1) logo.png

2)logo-small.png - отличие только в цвете .
Необходимо сделать так что бы logo.png был на дисплеях которые более чем 768px, а logo-small на экранах которые не превышают разрешение 768px.

В данный момент сделал так :
<a class="navbar-brand logos page-scroll" href="#page-top">
                    <img class ="logos-stock" src="img/logo.png" alt="*****"></a>
                 <a class="navbar-brand logos page-scroll" href="#page-top">    
                    <img class ="logos-small" src="img/logo-small.png" alt="*****"></a>
            </div>


}@media (min-width: 768px) {
  .logos-small img {
    display: none;
  }
}


И получилось убрать данный логотип (logo-small) с больших экранов, но и на маленьких так же он не работает (тут я понимаю что код не полный).

Не могу понять как заменить содержимое с одного на другое. Подскажите, пожалуйста, как решить эту задачу?
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ankhena
@Ankhena Куратор тега Вёрстка
Нежно люблю верстку
YuraLons, Для подмены изображений на разных размерах окна есть специальный тег picture

Ссылка у вас должна быть только одна, в ней picture с набором картинок.

Например,

<a class="page-header__logo main-nav__logo">
            <picture>
              <source media="(min-width: 1150px)" srcset="img/logo-desktop.svg">
              <source media="(min-width: 768px)" srcset="img/logo-tablet.svg">
              <img src="img/logo-mobile.svg" alt="Магазин ...">
            </picture>
          </a>


Если лого не в svg, то необходимо для каждого размера добавить еще srcset и картинку двойной плотности для ретины.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы