将 CSS 与使用 "data-original=" 加载的延迟加载图像一起使用

Question

我用延迟加载加载了一些图像，我必须将它们居中放置在页面中间。

所以我有标准的延迟加载插件

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

加载必须居中的图像并且

src="img/loading.gif"

也必须居中。

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

我正在使用以下类：lazy img-centered img-responsive with the following CSS:

.img-centered {
    margin: 0 auto;
}

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

不幸的是，这些类无法正常工作，所以我如何在居中时延迟加载图像？如果可能的话，我更喜欢使用 CSS 而不是 JS。

谢谢。

Answer 1

根据您上次的评论，如果您的图片设置为背景图片，您可以试试

background-position: 50% 50%;

这应该使图片的中间与元素的中间对齐

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