当设备大小发生变化时，如何使用 javascript 更改 img src？
[英]How is it possible to change an img src with javascript when the device size changes?
问题描述
I am trying to change an image source with javascript.
我正在尝试使用 javascript 更改图像源。 When the window size is max-width: 576px;当 window 大小为max-width: 576px 时； it should change to another source of image that suits the proportion of mobile devices.它应该更改为适合移动设备比例的另一种图像来源。 The element is an image slider.元素是图像 slider。
What I want to know is how to do it in javascript.我想知道的是如何在 javascript 中做到这一点。 I tried it already in the following code, but it does not change.我已经在下面的代码中尝试过，但它没有改变。 I would be so gratefull if you can help me finding my mistake.如果您能帮助我找出我的错误，我将不胜感激。 Thank you very much.非常感谢。
<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>
2 个解决方案
解决方案1
2 2021-04-07 10:57:24
I would recommend to use srcset property, why to use JS for this, when we have all things ready inbuilt.我建议使用srcset属性，为什么要为此使用 JS，当我们已经准备好所有东西时。
here is example you can use.这是您可以使用的示例。
in HTML在 HTML
<img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">
in CSS在 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);
}
}
解决方案2
0 已采纳 2021-04-07 11:14:37
There's something to be said for doing it a different way (see the other answer), but given that you specifically ask about using javascript, and have provided some code, here's a version of your code that does more or less what you want.以不同的方式做这件事有一些话要说（请参阅另一个答案），但鉴于您特别询问有关使用 javascript 的问题，并提供了一些代码，这里的代码版本或多或少可以满足您的需求。 I've used console.log to make up for the fact that the images aren't present.我使用了console.log来弥补图像不存在的事实。
<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) { // Define y here var y = window.matchMedia("(max-width. 576px)") if (y;matches) { // If media query matches console.log('matches'). sliderimg;src="slider1-mobile.png"; } else { console.log('doesnt match'). sliderimg;src="start-img-1;png"; } } changeImage(). // attach the event listener to the window. // specify that it should be a resize event, window;addEventListener('resize',changeImage) ; </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.