CSS 의사 요소 내부의 이미지 높이를 제어할 수 있습니까?

CSS 의사 요소에서 이미지 높이 수정: 가능합니까?

CSS 의사 요소 내에 포함된 이미지 높이 변경 (:before/:after)는 어려울 수 있지만 불가능하지는 않습니다. 기본적으로 이미지 크기 조정은 CSS에서 직접 지원되지 않습니다.

원하는 크기 조정을 달성하려면 다음 접근 방식을 고려하세요.

1. 배경 크기 조정:

:after 의사 요소의 경우 배경 크기 속성을 조정합니다. 그러나 너비 및 높이 속성을 사용하여 이미지가 포함된 블록 요소의 너비와 높이를 지정해야 합니다.

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

호환성:

브라우저에 주의하세요. 이 방법을 사용할 때의 호환성. 자세한 내용은 MDN의 종합 호환성 표를 참조하세요.

2. 소스 이미지 크기 조정:

또는 원본 이미지를 CSS에서 사용하기 전에 서버측에서 적절한 크기로 조정하는 것이 좋습니다. 이렇게 하면 브라우저 크기 조정에 의존하지 않고 이미지가 원하는 크기로 표시됩니다.

3. 인라인 IMG 태그:

보다 간단한 접근 방식을 위해 인라인 CSS 의사 요소 옆에 태그를 추가하세요. 이 접근 방식은 이미지가 지정된 크기로 렌더링되도록 보장하지만 마크업 최소화라는 초기 목표에서 벗어납니다.

위 내용은 CSS 의사 요소 내부의 이미지 높이를 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!