kann nicht die Bildgröße von W3schools.com automatischer Diashow für mobilen Browser

Question

Um wen es angeht ändern:

I-Code von W3schools.com Tutorial verwendet, um eine automatische Bild Diashow zum Erstellen. Die Slideshow funktioniert hervorragend auf Desktop-Dimensionen. Wenn ich jedoch auf mobile Bildschirmabmessungen umschalte, kann ich die Diaschau-Dimensionen nicht entsprechend verkleinern.

Ich kann dies mit allen anderen Bildern tun, da ich mit HTML/CSS kompetent bin, aber das hat mich ratlos gemacht. Ich bin mir nicht sicher, ob es das "Link rel" ist, das sich auf W3-Schulen, das Javascript oder etwas anderes, das ich vermisse, bezieht. Danke für jede Hilfe. Der Code lautet wie folgt:

HTML:

<div class="w3-content w3-section"> 
<img class="mySlides" src="slider_3.png"> 
<img class="mySlides" src="slider_2.png"> 
<img class="mySlides" src="slider_1.png"> 
<img class="mySlides" src="slider_4.png"> 
<img class="mySlides" src="slider_5.png"> 

CSS:

.mySlides { 
    display: none; 
    width: 960px; 
    height: 350px; 
} 

/* For mobile phones: */ 
@media screen and (min-width: 300px) and (max-width: 900px) { 

.mySlides { 
    display: none; 
    width: 100%; 
    height: auto; 
} 

und die Java:

var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
myIndex++; 
    if (myIndex > x.length) {myIndex = 1} 
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 7000); // Change image every 7 seconds 
} 

Answer 1

Ein Weihnachts Wunder geschah. Jetzt funktioniert es!