CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Иван Божков
Иван Божков

Reputation: 264

Make img fill container width/height with jQuery

I want do to something like background-size: cover but I don't care about the centering of the image, I just want it to fit the whole container.

I decided to do that by centering the image in a container and checking if the image has margin. If the image has margin-right then it needs width:100% and height:auto otherwise height:100% and width:auto;

It all worked fine until I tested it under Firefox. The problem is $(this).css("margin-top") returns a number in all browsers except Firefox. Firefox returns "auto". I tried replacing margin-top with .offset.top but that returns the offset of the element regarding the whole page, not it's closest relative parent.

Here is my code:

$("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>

My question is: Is there a function similar to .offset().top that returns the actual length between the image and the container because there are quite a lot of pictures and if I have to calculate it manually I am afraid it'll become too laggy.

I am open to other suggestions too.

Edit: Added the html.

Upvotes: 3

Views: 234

Answers (1)

C3roe
C3roe

Reputation: 96455

Is there a function similar to .offset().top that returns the actual length between the image and the container

.offset gets coordinates in respect to the whole document; .position however gets you the position in relation to the element’s “offset parent”.

The offset parent is the first ancestor element that itself is positioned in some way (so has a CSS position value different from the default static.) Since your img-container elements are relatively positioned, they constitute the offset parent for your images inside them.

Upvotes: 2

Related Questions