[ 티스토리 / 베이스캠프 ] 블로그 모바일 썸네일 비율 바꾸기

티스토리 베이스캠프 블로그 모바일 썸네일 비율 바꾸기

 

 

 

 

 

📱 베이스캠프 모바일 썸네일 비율

 

이번 포스팅에서 다뤄볼 내용은 베이스캠프 스킨 모바일 썸네일 비율 변경하는 법입니다.

 

베이스캠프 무료 스킨을 적용하면 모바일에서 세로로 긴 모양으로 썸네일이 확대돼서 보이더라고요

html 하나도 모르는 상태로 크기 바꾸고 싶어서 이것저것 만져보다가 해결법을 찾았습니다

 

 

 

 

 

 

 

🔨 모바일 썸네일 크기 바꾸기

 

스킨 편집 CSS 588번 줄로 가면 .list-article img { 를 찾을 수 있어요

그리고 width(너비), height(높이)를 조절해주면 돼요

 

저는 width: 100%, height: 320px로 설정해주었어요

여기서 100% 값이 얼마인지는 모르겠지만 80%도 해보고 320px도 해보고 여러 가지 값을 넣어봤을 때, 100%가 가장 마음에 들어서 100% 로 했어요

 

세로로 긴 썸네일에서 정방향으로 바뀌었어요!

 

 

 

 

 

 

 

🔨 썸네일 비율 정하기 : object-fit

CSS object-fit 속성은 img나 video 요소와 같은 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 정하는 속성이래요

 

- cover

: 가로세로 비율 유지 O / 콘텐츠 크기 크면 잘림 O

배켐 스킨은 cover로 설정되어 있어요. 저는 위에서 너비와 높이를 대략 정방향으로 맞춰 놓아서 세로로 긴 사진은 옆이 다 잘려요.

 

 

 

 

 

- contain

: 가로세로 비율 유지 O / 크기 맞춤 조절 O / 잘림 X

이게 가장 마음에 들어서 저는 얘로 설정해뒀어요

 

 

 

 

 

- fill

: 가로세로 비율 유지 X / 크기 맞춤 조절 O / 늘어남 O

 

 

 

 

 

- none

: 원본 보여줌

헤엑... 750x750 사이즈를 그대로 보여주니까 다 잘리고 난리 났네요

 

 

 

 

 

- scale-down

: none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택함

콘텐츠 원본 사이즈가 제가 설정한 100%/320px 보다 작으면 원본을, 설정값보다 크면 contain로 선택되는 설정이에요

 

 

 

 

 

🔅 크기 설정 후 모바일 화면 

 

잘리는 사진도 없고 크기도 제가 원하는 크기로 잘 나오는 걸 볼 수 있어요

 

여기까지 베이스캠프 무료 스킨 모바일 썸네일 크기 바꾸는 법이었습니다~!

 

 

 

 

 

 

---

 

베이스캠프

티스토리 블로그 반응형 무료 스킨 배포 :: 베이스캠프 (나눔, 추천)