Question

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

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

在Firefox下测试之前，一切正常。问题是$(this).css("margin-top")在除Firefox之外的所有浏览器中返回一个数字。 Firefox返回＆＃34; auto＆＃34;。我尝试将margin-top替换为.offset.top，但会返回关于整个页面的元素的偏移量，而不是它最接近的相对父级。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

编辑：添加了html。

Answer 1

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

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

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

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

1 个答案: