Установите ширину для псевдоэлемента с содержимым изображения-изображения

Question

У меня есть страница, которая должна быть пригодна для печати. Проблема состоит в том, что на странице есть некоторые элементы с background-image (и я не вижу изображения при печати), поэтому я пытаюсь создать таблицу стилей для принтера с некоторыми псевдоэлементами, которые помогут мне отображать изображения, это выглядит следующим образом:

.pbar-fill { 
    background: none !important; 
} 
.pbar-fill::before { 
    content: url("/images/bg-progress-bar-big01.gif") !important; 
    position: absolute !important; 
    z-index: 1003 !important; 
    width: 23px !important; 
} 

Не получается хорошо, так как изображение всегда получает свою полную ширину (220 пикселей).

Answer 1

Pseudo Elements - это всего лишь коробка, содержащая сгенерированный контент. Таким образом, вы не можете изменять размер изображения внутри.

Этот поток охватывает все варианты довольно тщательно
Can I change the height of an image in CSS :before/:after pseudo-elements?

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

.pbar-fill::before { 
    content: url('image.jpg'); 
    transform: scale(.5); 
}