使用jQuery使img填充容器宽度/高度

Question

我想做一些像背景大小的东西：封面，但我不关心图像的居中，我只是想让它适合整个容器。

我决定通过将图像置于容器中心并检查图像是否有边距来做到这一点。 如果图像有右边距，那么它需要宽度：100％和高度：自动否则高度：100％和宽度：自动;

这一切都很好，直到我在Firefox下测试它。 问题是$(this).css("margin-top")在除Firefox之外的所有浏览器中返回一个数字。 Firefox返回“auto”。 我尝试用.offset.top替换margin-top ，但是它返回了整个页面元素的偏移量，而不是它最接近的相对父级。

这是我的代码：

 $("aside .img-container").each(function() { if ($(this).find("img").offset().top >= 0) { // if image has margin-top make it height 100% $(this).addClass("full_height"); } else { $(this).removeClass("full_height"); } if ($(this).find("img").offset().left > 0) { $(this).removeClass("full_height"); } }) 

 aside .img-container { position: relative; width: 25%; height: 0; padding-bottom: 25%; display: inline-block; float: left; } aside .img-container img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: auto; } aside .full_height img { width: auto !important; height: 100% !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> <div class="img-container"> <img src="http://placehold.it/50x50" alt="" title=""> </div> </aside> 

我的问题是：是否有类似于.offset().top的函数返回图像和容器之间的实际长度，因为有很多图片，如果我必须手动计算，我担心它会变成太迟钝了。

我也对其他建议持开放态度。

编辑：添加了html。

Answer 1

是否存在类似于.offset（）。top的函数，它返回图像和容器之间的实际长度

.offset获取整个文档的坐标; .position然后获取与元素的“偏移父元素”相关的位置。

偏移父元素是第一个以某种方式定位的祖先元素（因此CSS position值与默认static不同。）由于img-container元素相对定位，它们构成了图像内部的偏移父元素。