Possible wrong documentation about picture tags

[Hecsall]

Issue description:

I think the documentation about <picture> tags is slightly wrong, trying the example code from the readme leaves the image with a white area (the body background) on the side.

Probably the correct usage, correct me if I'm wrong, is with the jarallax-img class on the inner <img> tag and not on the <picture> tag.

Version used:

Latest npm release

Code to reproduce the issue

You can see an example here https://codepen.io/Hecsa/pen/WNgVEby

<div class="jarallax">
    <!-- class jarallax-img here does not work well -->
    <picture class="jarallax-img">
      <source srcset="https://placehold.co/700x300" media="(max-width: 640px)" />
      <source srcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
      <img src="https://placehold.co/1920x600" alt="Image"/>
    </picture>
    Some text                  
</div>

<div class="jarallax">
    <picture>
      <source srcset="https://placehold.co/700x300" media="(max-width: 640px)" />
      <source srcset="https://placehold.co/1920x600" media="(max-width: 1280px)" />
      <!-- class jarallax-img here works as expected -->
      <img src="https://placehold.co/1920x600" alt="Image" class="jarallax-img"/>
    </picture>
    Some text                  
</div>

[Hecsall]

My bad, with the class on the <picture> tag the image was too high up, and after further testing, I noticed a piece of CSS that was not documented on the readme.

The readme writes:

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

You can include it from /dist/jarallax.css.

So I just copy-pasted that block of CSS guessing that it was all it takes to use the picture tag, then I found this example https://codepen.io/_nK/pen/VwxpPoz where there is an added selector for the <img> tag that fixes some styling:

.jarallax-img img {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

Without that block, with some image sizes, you could find white space inside jarallax below the image. See the issue inside this Codepen https://codepen.io/Hecsa/pen/zYmOxBg, when the 1920x600 image is visible, scrolling up and down reveals a white area between the image and the red block.

[laryn]

Confirmed!