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

Published Aug 23, 2022 | Updated Sep 23, 2022 | 0 comments

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

– 변경 후

TAG INFORMATION

Learn more on this topic

Related Blog Posts

워드프레스 재사용 가능 블록 메뉴 추가하기

워드프레스 재사용 가능 블록 메뉴 추가하기

워드프레스 관리자 페이지 좌측에 보이는 메뉴 목록에는 기본적으로 워드프레스 재사용 가능 블록 메뉴가 존재하지 않습니다. 재사용 가능 블록을 관리하기 위해 해당 페이지로 가기 위해서는 포스트 추가 및 편집 화면에서 찾아서 들어가야 합니다. 자주 쓰지 않을 때는 몰랐는데 최근에 자주 사용하다 보니 불편함이 생기네요 그래서 메뉴에 추가해서 쉽게 들어갈 방법을 찾던 중 다른 분이 작성해 둔 코드를 보고 추가할 수 있었습니다. ( 참조 링크 ) function.php 에 아래 코드를...

read more
워드프레스 재사용 가능 블록 – Read More

워드프레스 재사용 가능 블록 – Read More

워드프레스로 글을 작성하다 보면 일부 항목을 숨긴 상태로 표시했다가 필요한 경우 사이트를 방문한 사용자가 직접 펼쳐서 내용을 확인하게 하는 방식으로 작성 하는 경우가 있습니다. 이런 경우 Read More 로 검색해 보면 다양한 플러그인이 존재합니다. 아니면 Content Toggle (Accordion) Block For Gutenberg - Ultimate Blocks 같은 블록모음 플러그인을 설치해서 해당 블록을 사용할 수도 있습니다. 하지만 이와 같은 방법은 플러그인...

read more

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Banner IT Service

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares