image-url 내용이있는 의사 요소의 너비 설정

Question

인쇄 할 수있는 페이지가 있습니다. 문제는 페이지에 background-image이 포함 된 일부 요소가 포함되어있어 (인쇄 할 때 이미지를 볼 수 없음) 이미지를 표시하는 데 도움이되는 의사 요소가 포함 된 프린터 용 스타일 시트를 만들려고합니다. 이미지가 항상 전체 폭 (220px)를 먹을수록 그것은 잘 가지 않습니다

.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; 
} 

: 것 같습니다.

Answer 1

가짜 요소는 생성 된 내용을 포함하는 상자에 불과합니다. 따라서 이미지의 내부 크기를 조정할 수는 없습니다.

이 스레드는 매우 철저하게
Can I change the height of an image in CSS :before/:after pseudo-elements?

최선의 선택이 이제까지 맞는 것과 이미지를 확장 할 것으로 보인다 모든 옵션에 대해 설명합니다. 그러나 이것은 아마도 사방에 구현하기 위해 피싱하는 방법 일 것입니다.

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