- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах
Это на 45% больше, чем в 2022 году
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте ! Такая вот задача, есть кусок (логотип) вида:
<a href="/"><img src="/logo.png"></a>
</div>
Задача при адаптивности подставлять вместо logo.png - logo2.png.
Пробовал через background-image для тэга а, но не решается вопрос с кроссбраузерностью, т.к. background-size: contain; не понимает IE до 9, да и у 11 проблемы тоже с ним. Также и через filter (инверсию цветов пробовал), но не во всех браузерах работает.
Ради чего весь сыр-бор, в десктопной версии - картинка цветная, в мобильной - белая и урезанная.
Может есть у кого-то какие-то толковые идеи ?) Интересует именно правильный метод.
Заранее спасибо.
Можете попробовать через @media запросы показывать/скрывать блоки на устройствах.
<div class="mobile-logotype"></div>
.mobile-logotype {display: none}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.desktop-logotype {display: none}
.mobile-logotype {display: block}
}
Для того чтобы @media запросы корректно работали в старых версиях IE подключите respond.js
webstack, спасибо, изначально так и делал. Но получается будет лишняя ссылка на главную, пускай и скрытая... (хочу так же убрать циклические ссылки).
Погуглите srcset
Например:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
https://www.w3schools.com/tags/tag_picture.asp
не понимает IE до 9, да и у 11 проблемы тоже с ним.
Погуглите srcset
https://www.w3schools.com/tags/tag_picture.asp
Задача при адаптивности подставлять вместо logo.png - logo2.png.
Пробовал через background-image для тэга а, но не решается вопрос с кроссбраузерностью, т.к. background-size: contain; не понимает IE до 9, да и у 11 проблемы тоже с ним.
Зачем вообще использовать background-size, если можно размер ссылки менять и background-image. Выдумываете себе проблемы на ровном месте.
dma84, если менять размер ссылки и background-image картинка не полностью отображается, а вытягивается.
Ну раз не хотите по хорошему (а хорошее в данном случаи игнорировать ИЕ и использовать нормальный srcset или хотя бы background-size), ну а с display: none проблема в двойной ссылке, то остается вариант заменить путь картинки в зависимости от разрешения экрана. Маленький скрипт на jquery, если он не подключен, можно переделать под нативный js.
P.S. Сделал на скорую руку, сам такое никогда не делаю, ибо под мои нужды всегда хватает html-а и css-a.
а background-size:contain, пардон, вам чем не угодил?
работает на всех ветхозаветных браузерах, начиная с IE9
silicoid, не работает ниже 9 ие, а значит некомильфо :)
Люблю чтобы везде работало как надо :D
---------- Добавлено 13.03.2018 в 15:13 ----------
croatoa, спасибо. Похоже, на Вашем варианте и остановлюсь.