Как центрировать URI данных в фоновом изображении?

Question

Как центрировать 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/

ОБНОВИТЬ

Я замечаю, что многие упомянули, что мне не хватает фонового положения в моем примере выше. Но похоже, что даже с этим он не работает, когда его встроенный стиль?

<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,

2

Ответов: 3

CSS,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Может быть, я что-то упустил в вашем вопросе, но разве вы не должны просто добавлять позицию?

background-position: center;

score 2 · Accepted Answer

2

Если вы хотите Центрировать изображение, попробуйте JSfiddle

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

score 0 · Accepted Answer

0

Ваш фон уже соответствует div, и если вы хотите убедиться, что он находится в центре div, добавьте:

background-position:center center;

Но, похоже, ничего не меняется, потому что ваш div не является центром, поэтому добавьте:

margin:0 auto;

Теперь они все в центре позиционирования. https://jsfiddle.net/7pfc2vLx/2/