Применение адаптивных свойств изображения в исходном коде

Question

Я создал две версии логотипа: вертикальный и горизонтальный, первый для мобильных экранов, второй для рабочего стола, чтобы переключаться с одного на другой, мне нужен элемент изображения. К сожалению, мне не удалось реализовать это как в Dreamweaver, так и в Sublime text editor. Единственное, что я заметил после нескольких часов исследований, это то, что он работает только с фиктивными изображениями (placehold.it). Более того, проблема заключается в атрибуте srcset (который не отображает ничего, независимо от того, какой браузер), в отличие от атрибута src, который, кажется, правильно отображает исходное изображение. Любая помощь будет признательна! (код следует)

<picture>
 <source media="(min-width:600px)"
         srcset="assets/desk/logo horiz.png"/>
 <img src="assets/mob/logo vertical.png"/>
</picture>

Answer 1

Лучше всего это сделать с помощью CSS и медиа-запросов. В вашем CSS сначала установите изображение для мобильной версии вашего логотипа, затем с помощью медиазапроса вы переопределяете первый логотип для разной ширины экрана, как в этом примере используется другой логотип, когда экран 641px или шире:

.logo {
    height: 50px;
    width: 100px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
}

@media screen and (min-width: 641px) {
.logo {
    height: 100px;
    width: 200px;
    background-image: url(images/logo2.png);
}
}