Изменить логотип на основании разрешения экрана браузера

У меня есть два изображения: один с логотипом черного цвета и один с логотипом в белом. Я хотел бы иметь белый логотип, когда браузер имеет ширину менее 768 пикселей и черный логотип, когда он больше. Я что-то пробовал, но не изменяю в реальном времени, только если я перезагружу страницу.Изменить логотип на основании разрешения экрана браузера

$(function() { 
    if($(window).width() < 768){ 
     $('.logo').find("img").attr("src","/images/Trin-02.png"); 
    } 
    else{ 
     $('.logo').find("img").attr("src","/images/Trin-01.png"); 
    } 

});

Любое предложение? Спасибо

источник

2016-04-04 Albert

пытались ли вы CSS с запросами средств массовой информации? например, экран @media и (max-width: 768px) '? –

показать нам свой html. – callback

https://api.jquery.com/resize/

Вы правильно проверки ширины окна, но вы только делаете это, когда первой загрузке страницы в!

Вместо этого используйте функцию resize запустить скрипт каждый раз, когда экран изменяет размер

$(window).on("resize", function(){ 
    if($(window).width() < 768){ 
     $('.logo').find("img").attr("src","/images/Trin-02.png"); 
    } 
    else{ 
     $('.logo').find("img").attr("src","/images/Trin-01.png"); 
    } 
})

хотя это звучит как работа для запросов CSS СМИ, хотя мы не обо всех ваших потребностей и требований :)

источник

2016-04-04 11:59:07 NachoDawg

Спасибо! Он отлично работал – Albert

у меня есть чистый раствор JavaScript

document.getElementsByTagName("BODY")[0].onresize = function() { 
    if (window.outerWidth < 768) { 
     document.getElementById("img").src = yourFirstImage.png; 
    } else { 
     document.getElementById("img").src = yourSecondImage.png; 
    } 
}

источник

2016-04-04 12:00:46

Это все равно будет отображаться только при первой загрузке.Проверка необходимо выполнить при изменении размера окна. – callback

@callback fixed –

Вы можете сделать это только с помощью CSS и медиа-запросов.

img { 
 
    width: 400px; 
 
    content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg"); 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    img { 
 
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg"); 
 
    } 
 
}

<img alt="">

источник

2016-04-04 12:04:52 3rdthemagical

Я работаю в DNN, поэтому логотип подается динамически. Вот почему я чувствую себя лучше, используя javascript вместо медиа-запросов. Спасибо! – Albert

Вот самое простое решение, с помощью запросов медиа CSS3,

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>media queries</title> 
 
    <style> 
 
    @media screen and (max-width: 780px) { 
 
    body { 
 
     background-image: url("/images/Trin-02.png"); 
 
    } 
 
} 
 
    @media screen and (min-width: 780px) { 
 
    body { 
 
     background-image: url("/images/Trin-01.png"); 
 
    } 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 

 
</body> 
 
</html>

Таким образом, и может иметь согл изображения. на устройство, которое вы используете

источник

2016-04-04 12:07:07 Manish62

Если у вас есть векторная версия логотипа, сделайте imgname.SVG, а затем измените цвет с помощью css. (SVG является масштабируемой векторной графики и lmage будет хорошего качества)

HTML

<div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>

CSS

@media only screen and (max-width: 768px) { 

.logo img{ 
background-color:#000; 
height:50px; 
width:100%; 
} 
}

источник

2016-04-04 12:12:23 Ijaz

Там нет необходимости нацелиться на изображение несколько раз , Сохраните ссылку один раз, используйте ее несколько раз.

Создать функцию обратного вызова для события resize и связать его. Таким образом, вы также можете вызвать функцию обратного вызова, чтобы установить правильное изображение в init.

var image = $('.logo').find("img"); 

function setImage() { 
    var windowWidth = window.innerWidth, 
     src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png'; 

    image.attr('src', src); 
} 

$(window).on('resize', setImage); 
setImage();

https://jsfiddle.net/0nxdpdp6/1/

источник

2016-04-04 12:22:29 Pimmol

Изменить логотип на основании разрешения экрана браузера

ответ

Смежные вопросы