Javascript: how to get random width and height for image

Question

0.00/5 (No votes)

See more:

I have 10 images in the body, and Randomize button. When i click on Randomize button, i need to get random height and width for that all images. How can i do that?

What I have tried:

I have tried like this`

 <style>
		.d1{
			float: left;
			margin: 1px;
			width: 130px;
			height: 130px;
			background-size: cover;
		}
		#btn3{
			width: 100px;
			height: 30px;
		}
	</style>

<div class="d1" style="background-image: url(Images/1.jpg)"></div>
	<div class="d1" style="background-image: url(Images/2.jpg)"></div>
	<div class="d1" style="background-image: url(Images/3.jpg)"></div>
	<div class="d1" style="background-image: url(Images/4.jpg)"></div>
	<div class="d1" style="background-image: url(Images/5.jpg)"></div>
	<div class="d1" style="background-image: url(Images/6.jpg)"></div>
	<div class="d1" style="background-image: url(Images/7.jpg)"></div>
	<div class="d1" style="background-image: url(Images/8.jpg)"></div>
	<div class="d1" style="background-image: url(Images/9.jpg)"></div>
	<div class="d1" style="background-image: url(Images/10.jpg)"></div>
	<button onclick="randomize()" id="btn3">Randomize</button>


function randomize(){
	var arr = document.querySelectorAll(".d1")
	var height = parseInt(Math.random()*1000);
	var width = parseInt(Math.random()*1000);
	for(var i = 0; i < arr.length; i++){
		arr[i].style.height = height;
		arr[i].style.width = width;
	}
}

Posted 11-Jul-18 21:11pm

Suren97

Updated 11-Jul-18 22:36pm

Add a Solution

Comments

Kornfeld Eliyahu Peter 12-Jul-18 4:14am

Using image as background and displaying image as element are two different things...

F-ES Sitecore 12-Jul-18 4:35am

What do you mean "get random width and height"? Do you mean get the width and height of a random image?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohibur Rashid · Answer 1 · 2018-07-11T22:37:00

Your question is vague. each image has fixed height and width, since they are not vector image. You can't get random height and width, but if you look for random number then it's a different topic. Take a look at this JavaScript random() Method[^]

And you have used image as background of each DIV. If so, you cannot set height or width to any of the image. You are going to set height and width for div. But, if you want to set your div height and width according to your images height and width, it would be different method that you are seeking for. The following code might help

HTML

<html>
	<script>
	function process(di) {
		var imgurl = di.style.backgroundImage.replace(/^url\(\"|\"\)$/g, "");
		var img = new Image();
		img.onload=function () {
			di.style.height=this.height;
			di.style.width=this.width;
		}
		img.src = imgurl;
	}
	window.onload = function () {
		var x=document.querySelectorAll(".nonsense")
		for(var i=0;i<x.length; i++) {
			process(x[i]);
		}
	};
	</script>
	<body>
		<div class="nonsense" style="background-image:url(orange.png)" >ORANGE COLOR</div>
		<div class="nonsense" style="background-image:url(red.png)" >red COLOR</div>
	</body>
</html>