Canvas image is squished, can i make the canvas image size to cover

[gabe72]

Images even if i make the exact same size, as the canvas it ends up zooming the image and in some images makes it squished how to get the image to behave like the css property background-size: cover

[robin-dela]

Hey,

I published an update a while ago with the background: cover behaviour. Can you share a demo / some code, with your problem so I can help you?

[gabe72]

Hi, thanks for the reply, I updated the files with the new ones still the same issue.

enclosing part of code below, Html with dummy links

`

        <a href="" target="_blank">
            <section class="project-holder">
                <div class="project">
                    <div class="project-img" data-tilt data-tilt-max="8" data-tilt-perspective="500" >
                        <div class="projectImage" data-displacement="http://localhost/gabe/wp-content/uploads/2020/04/14.jpg" data-intensity="-0.4"  data-easing="Sine.easeOut">
                            <img src="https://images.unsplash.com/photo-1587614382231-d1590f0039e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
                            <img src="https://images.unsplash.com/photo-1519771773581-4ec4145d8a61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=872&q=80" alt="">
                        </div>
                        <div class="overlay"></div>
                    </div>
                    <div class="project-details">
                        <h3 class="split"></h3>
                        <p class="type"></p>  
                    </div>    
                </div>
            </section>  
        </a>    

`

JS

`function displacement(){ Array.from(document.querySelectorAll('.projectImage')).forEach((el) => { console.log(el); const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensity: el.dataset.intensity || undefined, speedIn: 1, speedOut: 0.5, easing: el.dataset.easing || undefined, hover: el.dataset.hover || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), displacementImage: el.dataset.displacement });

}); };`

[snowiewdev]

Hi, thanks for the reply, I updated the files with the new ones still the same issue.

enclosing part of code below, Html with dummy links

`

        <a href="" target="_blank">
            <section class="project-holder">
                <div class="project">
                    <div class="project-img" data-tilt data-tilt-max="8" data-tilt-perspective="500" >
                        <div class="projectImage" data-displacement="http://localhost/gabe/wp-content/uploads/2020/04/14.jpg" data-intensity="-0.4"  data-easing="Sine.easeOut">
                            <img src="https://images.unsplash.com/photo-1587614382231-d1590f0039e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
                            <img src="https://images.unsplash.com/photo-1519771773581-4ec4145d8a61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=872&q=80" alt="">
                        </div>
                        <div class="overlay"></div>
                    </div>
                    <div class="project-details">
                        <h3 class="split"></h3>
                        <p class="type"></p>  
                    </div>    
                </div>
            </section>  
        </a>    

` JS

`function displacement(){ Array.from(document.querySelectorAll('.projectImage')).forEach((el) => { console.log(el); const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensity: el.dataset.intensity || undefined, speedIn: 1, speedOut: 0.5, easing: el.dataset.easing || undefined, hover: el.dataset.hover || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), displacementImage: el.dataset.displacement });

}); };`

You can try the 'imagesRatio' property to get the background size cover effect

new hoverEffect({
       ...
        imagesRatio: 9 / 16,   // *** height : width ratio of your images
       ....
});

Remember it is not same as css aspect ratio as like width / height, it is reversed which took me a while to figure it out, although it is mentioned clearly in his documentation

[edgar-505]

@robin-dela how do i make the image automatically cover/fill the whole parent element without tweaking it all the time?

and i have two pictures that have different sizes.