ブラウザウィンドウのサイズを変更してimg srcを変更する

私は同僚のためにWordPress CMSでウェブサイトを作成しています。テーマを変更しました。ブラウザウィンドウのサイズを変更してimg srcを変更する

私の問題は、ウィンドウのサイズを変更してイメージsrcを変更する方法です（応答性）？

私のロゴ画像：ここにこのウェブサイト上の

<a href="http://www.ewacieslikiewicz.com/" class="eram-logo" rel="home" 
itemprop="url"><img src="http://www.ewacieslikiewicz.com/wp- 
content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png" 
alt="EWA CIEŚLIKIEWICZ" class="ol-retina"></a>

誰かが怒鳴るコードが完璧であることを、書いた：

$(function resize(){ 
    if ($(window).width() < 768) { 
     $(".eram-logo img").attr('src', 'http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png'); 
} else { 
     $(".eram-logo img").attr('src', 'http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png'); 
    } 
} 
resize(); 
$(window).on('resize', resize); 
    } 
});

は働いていません....

出典

2017-08-22 Karolina Kola

CSSトリック：[レスポンシブな画像の把握]（https://css-tricks.com/video-screenca） sts/133-figuring-responsive-images /） –

um、あなたはdocument.ready内でリサイズを定義しました.... – epascarello

私は少しあなたの関数を修正。これはうまくいくはずです！

//resize function 
 
function resize() { 
 
    if ($(window).width() < 768) { 
 
    $(".eram-logo img").attr(
 
     "src", 
 
     "http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png" 
 
    ); 
 
    } else { 
 
    $(".eram-logo img").attr(
 
     "src", 
 
     "http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png" 
 
    ); 
 
    } 
 
} 
 

 
//function call when window resized 
 
$(window).on("resize", resize);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="http://www.ewacieslikiewicz.com/" class="eram-logo" rel="home" itemprop="url"> 
 
    <img src="http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png" alt="EWA CIEŚLIKIEWICZ" class="ol-retina"> 
 
    </a> 
 
</body> 
 

 
</html>

出典

2017-08-22 20:21:19

これを試してみてください：

$(function() { 
$(window).resize(function() { 
    if ($(window).width() < 768) { 
      $(".eram-logo img").attr('src', 'http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png'); 
     } 
     else { 
      $(".eram-logo img").attr('src', 'http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png'); 
     } 
    }); 
});

出典

2017-08-22 20:26:01 koolkat

をこれは、jQueryのを必要とせずに動作します（私はときに私ができる最小の外部依存関係を維持したい）：

function resizeListener(e){ 
    var greaterThanSrc = 'test1'; 
    var lessThanSrc = 'test2'; 
    var el = document.querySelector('.eram-logo img'); 
    var curSrc = el.src; 
    if (window.innerWidth < 768 && curSrc != lessThanSrc) 
     el.src = lessThanSrc; 
    else if (window.innerWidth > 768 && curSrc != greaterThanSrc) 
     el.src = greaterThanSrc; 
} 

window.addEventListener('resize', resizeListener);

出典

2017-08-22 20:43:38

ブラウザウィンドウのサイズを変更してimg srcを変更する

答えて

関連する問題