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

Question

[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) с больших экранов, но и на маленьких так же он не работает (тут я понимаю что код не полный).

Не могу понять как заменить содержимое с одного на другое. Подскажите, пожалуйста, как решить эту задачу?

Comments

[Alams Stoyne]

HTML

<a class="navbar-brand logos full page-scroll" href="#page-top"><img class ="logos-stock" src="img/logo.png" alt="*****"></a>
<a class="navbar-brand logos small page-scroll" href="#page-top"> <img class ="logos-small" src="img/logo-small.png" alt="*****"></a>

CSS

.logos{
	display: none;
}
@media (max-width: 767px) {
  .logos.small{
	display: inline;
  }
}
@media (min-width: 768px) {
	.logos.full{
	  display: inline;
	}
}

Вопрос решается элементарно изучением с адаптивной верстки CSS

Если используется bootstrap то все еще проще

[YuraLons]

Спасибо !

[Ankhena]

Alams Stoyne, это вы такое советуете при наличии тега picture специально для этого придуманного?
Две дублирующие ссылки в коде? Вы серьезно?
Обалдеть.

[Alams Stoyne]

Ankhena, Я исходил из кода что предоставил автор вопроса.
Тег picture я встречал крайне редко и не использую в своей работе ибо еще на стороне сервера определяю девайс и выдаю нужное изображение или через media в Css задаю нужное мне изображение для ссылки

Answer 1

[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 и картинку двойной плотности для ретины.