CSS Pseudo elements에서 이미지 높이 수정 : 가능합니까?

for : pseudo elements 후 배경 크기 속성을 조정하십시오. 그러나 너비와 높이 특성을 사용하여 이미지를 포함하는 블록 요소의 너비와 높이를 지정하십시오.

. 배경 이미지 : URL ( '/images/pdf.png'); 배경 크기 : 10px 20px; 디스플레이 : 인라인 블록; 너비 : 10px; 높이 : 20px; 콘텐츠:""; }

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

이 메소드를 사용할 때 브라우저 호환성을 염두에 두십시오. 자세한 내용은 MDN의 포괄적 인 호환성 테이블을 참조하십시오.

또는 CSS에서 사용하기 전에 원본 이미지를 적절한 크기 서버 측에 크기를 조정하는 것을 고려하십시오. 이렇게하면 브라우저 스케일링에 의존하지 않고 이미지가 원하는 치수로 표시됩니다.

보다 간단한 접근 방식을 위해 CSS Pseudo Element와 함께 인라인 태그를 통합하십시오. 이 접근법은 이미지가 지정된 크기로 렌더링되지만 마크 업을 최소화하는 초기 목표에서 벗어납니다.