포스트 상단에 표시되는 Feather image 의 경우 테마 또는 기타 설정에 따라 다르게 표시되겠지만
현재 사용 중인 테마에서 작은 이미지가 등록된 경우 원본 이미지의 사이즈 보다 크게 확대가 되면서
비트맵 이미지의 특성으로 인해 깨져 보일 수 밖에 없습니다.
그래서 Additional CSS 에 다음과 같이 CSS 를 추가해서 좀 더 자연스럽게 표시될 수 있게 수정하였습니다.
object-fit – CSS: Cascading Style Sheets | MDN (mozilla.org)
위 링크를 참조해서 img 태그의 object-fit 속성을 이용해 사이즈 설정을 적용했습니다.
/* featured image object-fit */
.post-thumbnail > img {
object-fit: scale-down;
}
원본 이미지의 사이즈보다 크게 표시되면서 이미지가 자연스럽지 않음
– 변경 전
원본 이미지 크기에 벗어나지 않게 css 적용 후 깨지지 않게 표시됨
– 변경 후
0 Comments