1

Доброго времени суток. Уважаемые знатоки прошу вашей помощи. Хочу сделать резиновый квадратный блок, параметр Width задаю в процентах (что бы обеспечить норм отображение на всех мониторах). Как сделать так: измеряем длину Width в пикселах или других единицах, после чего присвоить значение параметру height значение взятое в Width.

Или быть может у вас есть свои идеи как это сделать Вот примерный код, который не могу довести до ума:

<div style ="width:20%" id = 'divv'>
<script>
 var x = $(this).width('divv');<br>
 var y = $(this).height('divv');<br>
 if (x > y) y=x <br>
 var b = document.getElementByclassName('divv');<br>
 b.style.width = x;<br>
b.style.height = x;   <br>
 document.body.appendChild(d);<br>
else x=y<br>
</script>

2 ответа 2

0

$(document).ready(function() {
	var element = $('#div');
	function math_height() {
		element.height(element.width());
	}
	math_height();
	$(window).on('resize',function () {
		math_height();
	});
});

2
  • Andrei Goncharov<br> Скрипт работает!! <br> Большое спасибо!!<br> Только вопрос:<br> зачем math_height(); два раза в конце<br> и <br> растолкуйте пожалуйста это:<br> $(window).on('resize',function ()<br> Очень интересно)))<br> 19 мая 2017 в 3:30
  • функция math_height() - высчитывает высоту от ширины.Дальше ее надо применять по какому-то событию. Изначально применяем ее по событию $(document).ready(), и по событию изменения ширины браузера $(window).on('resize'). Можно еще для точности применить ее по событию $(window).on('load') - оно отработает после полной загрузки страницы. 19 мая 2017 в 6:34
0

Если предполагаются относительные значения width, как в вашем случае, можно воспользоваться, например, padding-top

#divv {
  background: #a11dc2;
  width: 20%;
  padding-top: 20%;
}
<div id = 'divv'></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.