js Größe der Bilder beim Neuladen der Seite

Nur um zu starten, bin ich ein ganz neuer Programmierer, wollte aber immer darauf eingehen. Als erste Übung wollte ich eine kleine Galerie mit HTML erstellen. So weit, ist es gut. Dann kam ich auf eine kleine Frage, die ich selbst zu lösen versuchte: Ist es möglich, die Größe der Bilder in einem Bereich zu ändern (sagen wir, Höhe variiert von 1-1000px), wenn ich die Seite neu lade? Ich habe mehrere Javascripts mit einem var x = Math.floor((Math.random() * 1000) + 1); Befehl versucht, aber irgendwie nicht geschafft. So viel ich weiß, gibt es keine Möglichkeit, es in CSS zu tun? So würde die Höhe variabel sein und jedes Mal ändern, während Breite immer passt ....js Größe der Bilder beim Neuladen der Seite

<!DOCTYPE html> 
<head> 

    <script> 
var imgs = document.querySelectorAll('img.resizable'); 
for (var i = 0; i < imgs.length; i++){ 
    imgs[i].style.setProperty('--image-height', Math.floor(Math.random() * 1000) + 1 + 'px'); 
</script> 

<style> 
    figure { 
    display: inline-block; 
    margin: 0px; 
    border-left: 10px; 
    margin-left: 20px; 
    vertical-align:top; 
    } 

img.resizable { 
    height : calc(var(--image-height)); 
    width: auto; 
} 

    figcaption{ 
     font-size: 10px; 
     line-height: 2px; 
     text-align: left; 
     margin-top: 10px; 
    } 
</style> 
</head> 
<main> 

<figure> 
    <img src="pic1" class = "resizable"> 
<figcaption> 
    <p>CAPTIONimg1</p> 
    </figcaption> 
    </figure> 


<figure> 
    <img src="pic2" class = "resizable"> 
<figcaption> 
    <p>CAPTIONimg2</p> 
    </figcaption> 
    </figure> 


<figure> 
    <img src="pic3" class = "resizable"> 
<figcaption> 
    <p>CAPTIONimg3</p> 
    </figcaption> 
    </figure> 


<figure> 
    <img src="pic4" class = "resizable"> 
<figcaption> 
    <p>CAPTIONimg4</p> 
    </figcaption> 
    </figure> 


    <p>&nbsp;</p>

Quelle

2017-09-06 flo

Sie sind fast da:

 var images = document.getElementsByTagName('img');//SELECT ALL THE IMAGES 
    for(var i = 0; i < images.length; i++) {//ITERATE THROUGH ALL THE IMAGES 
     images[i].style.height=Math.floor((Math.random() * 1000) + 1);//APPLY THE RANDOM HEIGHT TO EACH IMAGE 
     images[i].style.width="auto";//MAKE THE WIDTH CORRESPOND PROPORTIONALLY 
    }

Quelle

2017-09-06 17:22:02 grateful

Es gibt einfachere Wege, aber hier ist eine mit CSS Variablen:

var imgs = document.querySelectorAll('img.resizable'); 
 
for (var i = 0; i < imgs.length; i++){ 
 
    imgs[i].style.setProperty('--image-height', Math.floor(Math.random() * 1000) + 1 + 'px'); 
 
}

img.resizable { 
 
    height : calc(var(--image-height)); 
 
    width: auto; 
 
}

<img class = "resizable" src = "http://lorempixel.com/200/200"> 
 
<img class = "resizable" src = "http://lorempixel.com/200/200">

Quelle

2017-09-06 17:22:24 juvian

sieht aus wie eine große Lösung! Die js müsste allerdings vor jedes Bild gehen, ist das richtig? oder kann ich es einfach am Anfang haben, würde es dann nicht für jedes Bild dieselbe Höhe berechnen? Vielen Dank! – flo

@flo gut, wenn Sie wollen die gleiche Skalierung für alle Bilder oder eine für jede – juvian

eigentlich ich dachte für jedes Bild skaliert auf eigene, dann denke ich, das CSS-Tag ist nicht ausreichend, bin ich richtig? Ist es möglich, jeden Höhenwert mit einem Skript zu definieren? – flo

js Größe der Bilder beim Neuladen der Seite

Antwort

Verwandte Themen