jsページのリロード時に画像のサイズを変更

私はプログラミングの初心者ですが、常にそれに乗りたいと思っていました。最初の練習として、私はhtmlで小さなギャラリーを作りたがっていました。ここまでは順調ですね。それから私は自分自身で解決しようとしたちょっとした疑問を思いつきました。ページをリロードするたびに、画像をある範囲（1〜1000pxの範囲の高さ）でリサイズすることは可能ですか？私はvar x = Math.floor((Math.random() * 1000) + 1);コマンドでいくつかのjavascriptを試しましたが、どうにかして管理しません。私が知っている限り、CSSでそれを行う方法はありませんか？だから高さがjsページのリロード時に画像のサイズを変更

<!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>

出典

2017-09-06 flo

....変数であると幅が常に調整しながら、毎回変わってしまうあなたはほぼあります

 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 
    }

出典

2017-09-06 17:22:02 grateful

あり簡単な方法があるが、ここで一つを使用してCSSの変数です：

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">

出典

2017-09-06 17:22:24 juvian

素晴らしい解決策のように見えます！しかし、すべての画像の前に行く必要があります、それは正しいですか？または私はちょうどそれがすべての画像のために同じ高さを計算しない最初にそれを持っていることができますか？ありがとう！ – flo

あなたがすべての画像に同じスケーリングをしたいのであれば、それともそれぞれの画像に同じスケーリングをしたいのですか？ – juvian

実際に私は自分のスケーリングしたすべての画像を持っていると思ったので、CSSタグでは不十分です。すべての高さの値をスクリプトで定義することは可能ですか？ – flo

jsページのリロード時に画像のサイズを変更

答えて

関連する問題