Адаптивный логотип: 2 разных картинки

171

silicoid

13 марта 2018, 11:18

#11

Василич#, тогда еще вариант

<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px,   800px" src="image-800w.jpg" alt="image">

для всякого янтаря будет показана обычная картинка, для современных браузеров - адаптивная

2

111

Василич#

13 марта 2018, 11:53

#12

silicoid, спасибо, это, наверное, лучший вариант, но что-то не получается:

т.е. нужно подставлять только при ширине максимум 800px logo2, а logo все что выше 800.

bmw-power.com.ua (https://bmw-power.com.ua)

Вопрос к верстальщикам, адаптивная Эксперименты с тегом picture Растянуть блок, по ширине

235

D.iK.iJ

13 марта 2018, 16:01

#13

Ну, правильное решение уже было вроде - выводить картинку бекграундом. И менять при уменьшении ширины экрана ниже 800:

@media screen and (max-width: 800px) {
тут стили
}

Можно скрыть картинку, а ссылке вокруг назначить фон, сделав ее блоком

display: block;
width: auto;
height: 100px;
background: url(/logo2.jpg) top center no-repeat;
background-size: contain; //или cover

Как-то видел вообще такое вот. Замена адреса картинки через CSS.

Только старые браузеры точно не поддерживают.

img {content: url(logo2.jpg);}

1

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Подмена бекграунда у ссылки Спрашиваем и отвечаем по разрешение экрана

S

171

silicoid

13 марта 2018, 16:08

#14

Василич#, <img srcset="/images/logo1.png 800w, /images/logo2.gif 801w" sizes="(max-width: 800px) 800px, (min-width: 801px) 801px" src="/images/logo1.png" alt="" title="" />

вот так работает

2

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта