OceanWP테마 최신글 위젯 이미지 비율 고정하는 방법

워드프레스의 OceanWP 테마에서 제공하는 최신글 위젯을 사용할 때 이미지 크기가 작으면 원래처럼 1:1비율로 나타나지 않고 빈공간이 나타나서 이미지 비율이 다르게 보이는 문제를 해결하는 코드이다.

a.recent-posts-thumbnail{aspect-ratio:1/1!important;object-fit:cover;background-color:#fff}

해당코드를 작성하면 이미지는 1:1비율로 채워져 나타날 것이다. background-color:#fff 이 부분은 배경색을 지정해주는 코드인데, 원하는 색상코드로 바꿀 수 있다.

비율 조절

1:1비율을 원한다면 aspect-ratio:1/1 로 바꾸면 된다.

이미지 채우기

object-fit:cover 부분의 cover를 fill, initial 등으로 바꿀 수 있다.

aspect-ratio가 빨간색으로 나타날 것인데, 코드가 잘 작동한다면 크게 신경쓰지 않아도 된다. 그 이유는 이 글의 댓글을 참고바란다.

답글 남기기 응답 취소