CSS 측면에서는 쉽게 구현할 수 있습니다:
img.emoji {
width: auto; /* width: 20px; 대체 */
height: 20px;
vertical-align: text-bottom;
}
(설명에 대해서는 DEV: add native lazy loading for emojis - Pull Request #15830#issuecomment-1031587082 - discourse/discourse - GitHub 참조.)
더 어려운 작업은 “사용자 정의 이모지” 부분과 이모지 렌더링입니다:
- 사용자 정의 이모지에는 각 이모지마다 추가 속성이 필요합니다:
aspect-ratio(또는 대안으로height와width). - 이모지 렌더링은 사용자 정의 이모지에 대해 새로운 속성
aspect-ratio를 사용하여width를 그에 맞게 변경해야 합니다 –height는20px로 유지됩니다.
사용자 정의 이모지를 위한 빠르고 쉬운 접근 방식:
사용자 정의 이모지의 img 태그에는 height="20"만 설정하고 width는 전혀 설정하지 않습니다 – 이를 통해 aspect-ratio/width 및 height 설정의 이점을 포기하게 됩니다.
CSS: img.emoji { width: auto; }