1

我试图重新调整 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

4

2 回答 2

1

您可以创建自己的活动:)

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

});
于 2013-09-04T01:01:50.813 回答
1

您在这里有一个解决方案jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute与 setTimeOut() 功能，但我会让按钮触发改变......

于 2013-09-04T00:51:56.767 回答