时间戳

首页 > 解决方案 > 当设备大小发生变化时，如何使用 javascript 更改 img src？

javascript - 当设备大小发生变化时，如何使用 javascript 更改 img src？

问题描述

我正在尝试使用 javascript 更改图像源。当窗口大小为max-width: 576px; 它应该更改为适合移动设备比例的另一种图像来源。该元素是一个图像滑块。

我想知道的是如何在javascript中做到这一点。我已经在下面的代码中尝试过，但它没有改变。如果您能帮助我找出我的错误，我将不胜感激。非常感谢你。

<DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="beispiel.css">
</head>
<body>


<!-- Pictures in slideshow -->

    <div id="Slider" class="Slide col-1">

        <div class="Slide-ontop">
            <!--<div class="img1 slider-img mySlides"></div>-->
            <image class="changeimg slider-img mySlides" src="start-img-1.png"                      alt="Lets grow together" />
            <image class="slider-img mySlides" src="start-img-1.png" alt="Lets grow together" />
            
            <div class="teaser-box">
                <h1 class="serif-heading-1">Let us grow together</h1>
                <p class="sans-serif-text2">Wie die xx Ihnen helfen kann.</p>
            </div>
       </div>

    </div>

    <div class=" button2">
            <button class="w3-button demo sans-serif-caption space-button-left"                   onclick="currentDiv(1)">01</button> 
            <button class="w3-button demo sans-serif-caption"                                     onclick="currentDiv(2)">02</button> 
    </div>

    <script type="text/javascript"> 
            var slideIndex = 1;
            showDivs(slideIndex);
        
            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("demo");
                if (n > x.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = x.length}
                for (i = 0; i < x.length; i++) {
                     x[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" w3-red", "");
                }
                x[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " w3-red";
            }


            let sliderimg = document.getElementsByClassName("changeimg");

            function changeImage(y) {
                if (y.matches) { // If media query matches
                sliderimg.src="slider1-mobile.png";
                } else {
                sliderimg.src="start-img-1.png";
                }
            }
            
            var y = window.matchMedia("(max-width: 576px)")
            changeImage(y);
            y.addEventListener(changeImage) ;
    </script>

</body>
</html>

标签： javascripthtmljquerycssmedia-queries

解决方案

我建议使用srcset属性，为什么要使用 JS，当我们已经准备好所有东西时。

这是您可以使用的示例。

在 HTML 中

    <img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…&quot;>

在 CSS 中

.img {
   background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}

推荐阅读