无法在响应式网站上将高度缩放到宽度

Question

Im trying to have a div re-size so that the height stays the same width as the height. The divs are constantly changing size,

The width changes size because of percentages, however the height is changed using 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);
   });

This works fine for when the browser window is re-sized but the #inner_content div re-sizes when a button is pressed, so the height of the div.select_tile stays the same as it was before the button press but the width changes.

I was wondering if there was an event that waits for a change in the width or for something to change.

basically I want the width and height at 1:1 ratio to stay the same but scale to the size of the browser window on any change on either property.

Any assistance on this would be much appreciated, Thanks

edit: added html

Answer 1

您在这里有一个解决方案，可以使用setTimeOut（）函数来确定如何确定一个div更改其高度或任何css属性 ，但是我会让按钮触发更改...

Answer 2

you could create your own event :)

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

});