如何在背景图片中居中放置数据URI？

问题

似乎background-position / background-cover无法将数据URI作为背景图像使用？ 我所拥有的是要上传图像的预览。 为了显示这些预览，我使用JS将数据URI转换为CSS背景图像，希望将其居中。

但我注意到以下代码不适用于数据URI

div {
    width: 200px;
    height: 200px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}

https://jsfiddle.net/7pfc2vLx/

UPDATE

我注意到，就像很多人提到的那样，我在上面的示例中缺少背景位置。 但是，即使它是内联样式，它似乎也不起作用？

<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA

https://jsfiddle.net/7pfc2vLx/4/

css

回答

如果要居中图像，请尝试JSfiddle

div {
  width: 100%;
  height: 200px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
  background-position: center center;
}

回答

也许我在您的问题中遗漏了一些东西，但您不应该只是增加职位吗？

background-position: center;

回答

您的背景已经适合div，如果要确保它位于div的中心，请添加：

background-position:center center;

但是似乎没有什么变化，因为您的div本身不在居中，因此添加：

margin:0 auto;

现在他们都处于中心化。 https://jsfiddle.net/7pfc2vLx/2/