無法在響應式網站上將高度縮放到寬度

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

您在這里有一個解決方案，可以使用setTimeOut（）函數來確定如何確定一個div更改其高度或任何css屬性 ，但是我會讓按鈕觸發更改...

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

});