0

I'm using the lazysizes plugin in conjunction with srcset on a fluid layout. I can't figure out how to get the browser to load the page to the correct length rather than extending the page as you scroll.

I have made a codepen using the bootstrap framework to demonstrate here

http://codepen.io/elevenelevne/pen/EKbERV

After much reading I'm sure it is to do with the browser not being able to calculate the height as it's not set but I can't quite get it to work in a responsive way

Code but with say 10 rows

<div class="container-fluid">

  <div class="row-fluid">

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

  </div>

  </div>

</div>

Any help would be gratefully accepted

batas
  • 65
  • 1
  • 7

1 Answers1

0

For anyone that is interested I solved the problem of my page reflowing by adding a wrapper around the img and setting the padding-bottom to a ratio that matched the image. In my case it was a 9x6 image so I did the following equation

6 / 9 = 0.6666667 * 100 = 66.666667

I ended up settling with 66.5% for a full width image and 33.25% for a 50% width image after a bit of trial and error as at certain sizes the browser interpreted the image to be 1px too tall

http://codepen.io/elevenelevne/pen/jqYqJa

  <div class="lazy-wrapper ratio-padding">

    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="100vw" class="lazyload" alt="" />

  </div>

  <div class="lazy-wrapper-2 ratio-padding-half">
    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="(min-width: 768px) 50vw, 100vw" class="lazyload"
      alt="" />
  </div>

  <div class="lazy-wrapper-2 ratio-padding-half">
    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="(min-width: 768px) 50vw, 100vw" class="lazyload"
      alt="" />
  </div>

css

.ratio-padding {
    padding-bottom: 66.5%; 
    height: 0;
}

.ratio-padding-half {
    padding-bottom: 33.25%; 
    height: 0;
}
.lazy-wrapper {
    position: relative;
    overflow:hidden;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }

.lazy-wrapper-2 {
    width: 100%;
    float:left;
    }

@media (min-width: 768px) {
    .lazy-wrapper-2 {
    width: 50%;
    }
}

.lazy-wrapper img, .lazy-wrapper-2 img {
    max-width: 100%;
    width: 100%
}
batas
  • 65
  • 1
  • 7