워드프레스 대표 이미지 사이즈 조정 방법 수정하기

포스트 상단에 표시되는 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 적용 후 깨지지 않게 표시됨

– 변경 후