scaleflex/js-cloudimage-responsive

activating this plugin absolutely breaks my whole design

Opened this issue · 0 comments

Hi,
i tried to use this plugin on my website. I setup it with cdn and tried to use it on one single image.
When i do it a wrapper appear and bring totaly the image position.
So i tried to activate the plugin on all image on one page for to see the result. And out of about 15 images only one is displayed correctly. The others break all the css.

For exemple on this simple footer i have that With this css/html

footerok

    <div class="payment">
        <h3><span>PAIEMENT SÉCURISÉ GARANTI</span></h3>
        <div class="payment_logo">
            <img src="/asset/img/mastercard.webp" alt="">
            <img src="/asset/img/sepa.webp" alt="">
            <img src="/asset/img/3x-sans-frais.webp" alt="">
            <img src="/asset/img/visa.webp" alt="">
            <img src="/asset/img/ancv.webp" alt="">
        </div>
    </div>

.footer .bottom .payment {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px
.footer .bottom .payment .payment_logo img {
padding: 5px 10px;
height: 50px;
width: 100px;
}

But if i use "ci-src" on the first image i have that

footernotok

I tried to set width and height directly in the img attribute but i can't keep my layout when images are returned.