javascript - 在调整大小时将图像高度应用于 Div

Question

我在 div 中有一个 slider 。但是， slider 的相对位置使 slider 位于容器 div 下方。我想通过获取 slider 图像的高度并将其添加到相应 div 的类/id 来增加 div 的高度。

var img = $("#gallery > img");
$("#gallery").css({width:img.width(), height:img.height()});

HTML 内容

 <div id="gallery">

  <img class="img-responsive" src="images/shom/gallery/birdsview.jpg"/>
  <img class="img-responsive" src="images/shom/gallery/living.jpg"/>
  <img class="img-responsive" src="images/shom/gallery/bedroom.jpg"/>

</div>
<div class="col-md-12>Some description here</div>

CSS 部分

#gallery { position: relative; }
#gallery > img { position: absolute; left: 0; top: 0; display: none; }
#gallery > img:first-child { display: block; }

上面你可以看到我使用的脚本。但问题是当我调整浏览器窗口大小时，高度没有相应调整。当页面最初加载时，它仍然应用高度。

期待您对此的支持。

Answer 1

处理这种情况的完美解决方案是使用 css 来处理，因为如果容器内有 slider ，除非容器具有固定高度，否则它应该至少与其内容一样增长。

现在，您可以通过在窗口调整大小时再次运行脚本来解决此问题，

$( window ).resize(function() {
  var img = $("#gallery > img");
  $("#gallery").css({width:img.width(), height:img.height()});
});

当浏览器窗口的大小改变时，resize 事件被发送到 window 元素。