Question

我试图让div重新调整尺寸，使高度与高度保持相同的宽度。 div正在不断变化大小，

由于百分比，宽度会改变大小，但是使用Jquery更改高度。

HTML

<div id="inner_container">
        <div id="Sbox1" class="select_tile" > </div>
        <div id="Sbox2" class="select_tile" > </div>
        <div id="Sbox3" class="select_tile" > </div>
        <div id="Sbox4" class="select_tile" > </div>
        <div id="Sbox5" class="select_tile" > </div>
        <div id="Sbox6" class="select_tile" > </div>
        <div id="Sbox7" class="select_tile" > </div>
        <div id="Sbox8" class="select_tile" > </div>
<div class="clr"> </div>

的CSS

#inner_container 
{    width:98%; min-width:50%; max-width:1600px; 
     margin:auto; padding:1% 1%; text-align:center; background:;}

.select_tile 
{    width:23%; min-width:50px; min-height:50px;  
     background:green; margin:1%; float:left;}

Jquery的

   $(window).resize(function() {
      var ccW = $('.select_tile').width();
      $('.select_tile').css("height", ccW);
   });

这适用于浏览器窗口重新调整大小但#inner_content div在按下按钮时重新调整大小，因此div.select_tile的高度保持与按下按钮之前相同但宽度改变。

我想知道是否有一个事件等待宽度的变化或者有什么变化。

基本上我希望宽度和高度以1：1的比例保持不变，但在任一属性的任何更改上都会缩放到浏览器窗口的大小。

非常感谢对此的任何帮助，谢谢

编辑：添加了html

Answer 1

你在这里有一个解决方案jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute和setTimeOut（）函数，但我会让按钮触发更改......

Answer 2

你可以创建自己的活动：）

$(function() {

  // moved this out of the event so it doesn't
  // do a DOM traversal every 300ms!!! :)
  var $tiles = $('.select_tile');

  // this is your own custom function, which can be triggered
  // as you see below
  $(window).on("resizeBoxes" , function(e,$selector) {

     //set your box resize code here.
     var ccW = $selector.width();
     $selector.css("height", ccW);

  });

  // using 300 ms as it's not too short to kill a device,
  // and not too long to show noticable lag.
  // importantly though you want the resize event to
  // be succinct and easy on cpu.

  var resizeTimer = setInterval( function() {
    $(window).trigger("resizeBoxes",$tiles);
  }, 300);


  $(window).on("resize", function(e) { $(window).trigger("resizeBoxes",$tiles); });
  $("#button").on("click", function(e) { $(window).trigger("resizeBoxes",$tiles); });
  // this next one might be best for you :)
  $(window).on("mousemove", function(e) { $(window).trigger("resizeBoxes",$tiles); });

});

无法在响应式网站上将高度扩展到宽度

2 个答案: