Search code examples
jquerycssimagelazy-loadingcenter

Use CSS with Lazy Load images loaded by using "data-original="

i have a few images loaded with Lazy Load and i have to center them in the middle of the page.

So i have the standard Lazy Load plugin with

data-original="img/products/a001.jpg"

that loads a image that has to be centered and

src="img/loading.gif"

that has to be centered as well.

<img class="lazy img-centered img-responsive" data-original="img/products/a001.jpg" src="img/loading.gif" alt="">

I am using the following classes: lazy img-centered img-responsive with the following CSS:

.img-centered {
    margin: 0 auto;
}

.img-responsive {
    display:block;
    width:100%;
    height:auto
}

Unfortunately the classes do not work as they where suppose to so how can i lazy load the images while centering them? I prefer to use CSS instead of JS, if it is possible.

Thanks.

Solution

  • According to your last comment, if your images are set as a background-image, you can try

    background-position: 50% 50%;

    This should keep the middle of your picture aligned with the middle of your element