Suren97 Ответов: 1

Javascript: как получить случайную ширину и высоту изображения

У меня есть 10 изображений в теле и кнопка Randomize. Когда я нажимаю на кнопку Randomize, мне нужно получить случайную высоту и ширину для всех изображений. Как я могу это сделать?

Что я уже пробовал:

Я уже пробовал вот так`

 <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;
	}
}

Kornfeld Eliyahu Peter

Использование изображения в качестве фона и отображение изображения в качестве элемента-это две разные вещи...

F-ES Sitecore

Что значит "получить случайную ширину и высоту"? Вы имеете в виду получить ширину и высоту случайного изображения?

1 Ответов

Рейтинг:
0

Mohibur Rashid

Ваш вопрос расплывчат. каждое изображение имеет фиксированную высоту и ширину, так как они не являются векторным изображением. Вы не можете получить случайную высоту и ширину, но если вы ищете случайное число, то это другая тема. Взгляните на это Метод JavaScript random() [^]

И вы использовали изображение в качестве фона каждого DIV. Если это так, то вы не можете установить высоту или ширину для любого изображения. Вы собираетесь установить высоту и ширину для div. Но если вы хотите установить высоту и ширину div в соответствии с высотой и шириной ваших изображений, это будет другой метод, который вы ищете. Следующий код может помочь

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