티스토리 스킨 썸네일 비율 값 예시

Tistory/티스토리 팁 2020. 11. 7.

썸네일 비율 변경 시 입력한 모든 사이즈가 다 적용되는 것은 아니며 티스토리에서 허용하는 사이즈만 적용이 가능합니다.
저 또한 원하는 비율의 근사치를 찾기 위해 매번 가로 세로 10 픽셀씩 바꿔가며 찾았었는데 비효율적이어서 간략하게 정리해 사용하다 조금 더 정리해 공개합니다.

 

이미지가 없고 값만 보이는 경우 티스토리에서 더이상 지원하지 않는 비율이며,
이를 적용하기 위해서는 기본적으로 각 스킨의 기본 안내를 먼저 참고하세요!!

 

스킨 편집 > 갤러리형 비율 변경 또는 썸네일 비율 변경을 지원하는 경우 

아래 C20 부터 C1000 까지 정리되어있는데 값은 가로 세로 고정 값이고 이 중 원하는 비율의 값을 스킨 옵션에 입력하면 되며, 넓이가 큰 이미지는 가독성을 위해 줄여져서 보이도록 세팅 되어있으나 실제 사이즈는 적혀진 사이즈 그대로 크게 적용 됩니다.

 

웹진형 등 변경이 되지 않는 경우 - CSS에서 .item .thumbox .thumbnail 를 검색 후 .item 앞에 #cover 또는 #c-web #c-ins 등이 있는 경우 이는 커버에 적용되는 부분이니 더 검색해 #myo_web .myo_web 등이 붙어있는 값을 찾아 padding 값을 변경합니다. 주의할 점은 퍼센트로 지정해야 합니다.

예1) 일반 웹진형 

.myo_bbs.web .item .thumbox .thumbnail {
    padding-top: 100%;
}

 

예2) 일반 웹진형 

#myo_web .item .thumbox .thumbnail {
    padding-top: 100%;
}

 

예3) 커버 웹진형 

#c-web #myo_web .item .thumbox .thumbnail {
    padding-top: 100%;
}

 

예4) 커버 인스타그램형 

#c-ins .myo_gal .item .thumbnail {
    padding-top: 100%;
}

 

스킨 편집 > 갤러리형 비율 변경 또는 썸네일 비율 변경을 지원하지 않는 경우

각 스킨의 전용 페이지에 안내가 되어있으니 참고하여 수정합니다.
간단하게 설명해 html에서 C400x400 같은 값을 찾아 변경하면 됩니다. 기본 값은 스킨마다 다릅니다.

 


 

원본 이미지 비율 - R○○○x0 or R0x○○○

가로 기준인 경우 R○○○x0, 세로 기준인 경우 R0x○○○
지정한 사이즈보다 원본 사이즈가 작은 경우 확대해 채우지 않음.

https://i1.daumcdn.net/thumb/R500x0/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

https://i1.daumcdn.net/thumb/R0x400/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

가로 세로 사이즈 지정, 중심 기준 - C○○○x○○○

지정한 사이즈를 반드시 채우고 나머지 자름.

https://i1.daumcdn.net/thumb/C500x500/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

가로 세로 사이즈 지정, 넓이 또는 높이 기준 - P○○○x○○○

가로가 세로보다 긴 사진은 상하로 여백이 생기고,
세로가 가로보다 긴 사진은 좌우로 여백이 생김

https://i1.daumcdn.net/thumb/P500x500/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

움직이는 이미지(gif) 멈춤 - S○○○x○○○

지정한 사이즈보다 원본 이미지가 작은 경우 확대해서 채움

https://i1.daumcdn.net/thumb/S500x300/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

https://i1.daumcdn.net/thumb/S500x0/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

https://i1.daumcdn.net/thumb/S0x400/?fname=https://t1.daumcdn.net/cfile/tistory/999A32455A9AAE8F23

 

 


C20

C20x20
1:1

C30

C30x20
3:2
C30x30
1:1

C40

C40x40
1:1

C50

C50x50
1:1

C60

C60x50
6:5

C70

C70x50
7:5
C70x70
1:1
C70x80
7:8
C70x100
7:10

C80

C80x50
8:5
C80x60
4:3
C80x70
8:7
C80x80
1:1
C80x100
4:5

C90

C90x50
9:5
C90x70
9:7
C90x110
9:11
C90x120
3:4
C90x130
9:13
C90x260
9:26

C100

C100x50
2:1
C100x70
10:7
C100x80
5:4
C100x90
10:9
C100x100
1:1
C100x120
5:6
C100x140
5:7
C100x200
1:2
C100x400
1:4

C110

C110x60
11:6
C110x70
11:7
C110x80
11:8
C110x90
11:9
C110x100
11:10
C110x110
1:1
C110x120
11:12
C110x130
11:13
C110x140
11:14
C110x160
11:16

C120

C120x80
3:2
C120x100
6:5
C120x120
1:1
C120x160
3:4
C120x170
12:17
C120x190
12:19

C130

C130x90
13:9
C130x130
1:1
C130x180
13:18

C140

C140x70
2:1
C140x90
14:9
C140x140
1:1
C140x200
7:10

C150

C150x100
3:2
C150x110
15:11
C150x140
15:14
C150x150
1:1
C150x200
3:4

C160

C160x90
16:9
C160x100
8:5
C160x110
16:11
C160x130
16:13
C160x160
1:1
C160x180
8:9
C160x200
4:5
C160x220
8:11
C160x280
4:7

C170

C170x110
17:11
C170x120
17:12
C170x150
17:15
C170x170
1:1

C180

C180x100
9:5
C180x110
18:11
C180x120
3:2
C180x130
18:13
C180x140
9:7
C180x180
1:1
C180x200
9:10
C180x220
9:11
C180x240
3:4
C180x250
18:25
C180x260
9:13

C190

C190x100
19:10
C190x170
19:17
C190x180
19:18
C190x190
1:1
C190x240
19:24
C190x270
19:27

C200

C200x100
2:1
C200x110
20:11
C200x130
20:13
C200x140
10:7
C200x150
4:3
C200x160
5:4
C200x190
20:19
C200x200
1:1
C200x230
20:23
C200x280
5:7
C200x290
20:29
C200x400
1:2

C210

C210x80
21:8
C210x120
7:4
C210x130
21:13
C210x250
21:25
C210x300
7:10
C210x310
21:31

C220

C220x120
11:6
C220x150
22:15
C220x160
11:8
C220x180
11:9
C220x190
22:19
C220x220
1:1
C220x300
11:15
C220x320
11:16
C220x400
11:20

C230

C230x130
23:13
C230x140
23:14
C230x150
23:15
C230x170
23:17
C230x180
23:18
C230x190
23:19
C230x230
1:1
C230x250
23:25
C230x280
23:28
C230x300
23:30
C230x330
23:33

C240

C240x140
12:7
C240x180
4:3
C240x240
1:1
C240x300
4:5
C240x320
3:4
C240x340
12:17

C250

C250x150
5:3
C250x180
25:18
C250x250
1:1
C250x300
5:6

C260

C260x160
13:8
C260x170
26:17
C260x200
13:10
C260x220
13:11
C260x250
26:25
C260x260
1:1

C270

C270x100
27:10
C270x180
3:2
C270x190
27:19
C270x200
27:20
C270x220
27:22
C270x240
9:8
C270x270
1:1
C270x360
3:4

C280

C280x150
28:15
C280x200
7:5
C280x230
28:23
C280x240
7:6
C280x250
28:25
C280x320
7:8
C280x400
7:10

C290

C290x160
29:16
C290x290
1:1

C300

C300x140
15:7
C300x150
2:1
C300x170
30:17
C300x190
30:19
C300x200
3:2
C300x240
5:4
C300x250
6:5
C300x260
15:13
C300x280
15:14
C300x300
1:1
C300x480
5:8

C320

C320x50
32:5
C320x80
4:1
C320x100
16:5
C320x110
32:11
C320x160
2:1
C320x180
16:9
C320x200
8:5
C320x220
16:11
C320x240
4:3
C320x280
8:7
C320x290
32:29
C320x320
1:1
C320x380
16:19
C320x400
4:5
C320x420
16:21
C320x450
32:45
C320x460
16:23
C320x520
8:13
C320x560
4:7

C330

C330x160
33:16
C330x240
11:8
C330x320
33:32
C330x330
1:1

C340

C340x290
34:29
C340x340
1:1

C350

C350x350
1:1

C360

C360x120
3:1
C360x140
18:7
C360x160
9:4
C360x180
2:1
C360x190
36:19
C360x200
9:5
C360x220
18:11
C360x240
3:2
C360x260
18:13
C360x270
4:3
C360x300
6:5
C360x320
9:8
C360x340
18:17
C360x360
1:1
C360x520
9:13

C370

C370x250
37:25

C380

C380x160
19:8
C380x230
38:23

C390

C390x390
1:1

C400

C400x170
40:17
C400x200
2:1
C400x220
20:11
C400x300
4:3
C400x360
10:9
C400x400
1:1
C400x540
20:27
C400x560
5:7
C400x600
2:3

C410

C410x160
41:16

C420

C420x240
7:4
C420x300
7:5

C440

C440x200
11:5
C440x210
44:21
C440x220
2:1
C440x260
22:13
C440x280
11:7
C440x300
22:15
C440x440
1:1

C450

C450x170
45:17
C450x450
1:1
C450x600
3:4

C480

C480x260
24:13
C480x270
16:9
C480x310
48:31
C480x320
3:2
C480x520
12:13
C480x580
24:29

C500

C500x200
5:2

C510

C510x300
17:10
C510x420
17:14

C520

C520x360
13:9
C520x390
4:3

C540

C540x300
9:5
C540x360
3:2

C550

C550x220
5:2
C550x280
55:28
C550x300
11:6

C560

C560x230
56:23
C560x300
28:15
C560x420
4:3

C580

C580x420
29:21
C580x450
58:45

C600

C600x50
12:1
C600x200
3:1
C600x240
5:2
C600x300
2:1
C600x400
3:2
C600x440
15:11
C600x600
1:1

C620

C620x110
62:11

C630

C630x420
3:2
C630x440
63:44
C630x630
1:1
C630x670
63:67
C630x760
63:76

C640

C640x90
64:9
C640x100
32:5
C640x110
64:11
C640x120
16:3
C640x160
4:1
C640x200
16:5
C640x220
32:11
C640x260
32:13
C640x270
64:27
C640x300
32:15
C640x320
2:1
C640x340
32:17
C640x360
16:9
C640x380
32:19
C640x390
64:39
C640x400
8:5
C640x420
32:21
C640x430
64:43
C640x450
64:45
C640x480
4:3
C640x520
16:13
C640x560
8:7
C640x580
32:29
C640x590
64:59
C640x600
16:15
C640x640
1:1
C640x780
32:39
C640x860
32:43
C640x900
32:45
C640x960
2:3

C650

C650x500
13:10

C660

C660x350
66:35
C660x380
33:19
C660x440
3:2
C660x800
33:40

C670

C670x350
67:35
C670x440
67:44

C680

C680x240
17:6
C680x320
17:8
C680x340
2:1
C680x690
68:69

C690

C690x330
23:11
C690x350
69:35
C690x500
69:50
C690x690
1:1
C690x800
69:80

C700

C700x350
2:1
C700x380
35:19
C700x400
7:4
C700x1000
7:10

C720

C720x90
8:1
C720x100
36:5
C720x140
36:7
C720x180
4:1
C720x200
18:5
C720x220
36:11
C720x240
3:1
C720x250
72:25
C720x260
36:13
C720x270
8:3
C720x280
18:7
C720x300
12:5
C720x320
9:4
C720x340
36:17
C720x360
2:1
C720x380
36:19
C720x390
24:13
C720x400
9:5
C720x440
18:11
C720x460
36:23
C720x480
3:2
C720x510
24:17
C720x520
18:13
C720x540
4:3
C720x580
36:29
C720x620
36:31
C720x640
9:8
C720x680
18:17
C720x720
1:1
C720x760
18:19
C720x890
72:89
C720x960
3:4
C720x1000
18:25

C740

C740x500
37:25

C750

C750x140
75:14
C750x200
15:4
C750x220
75:22
C750x300
5:2
C750x340
75:34
C750x350
15:7
C750x400
15:8
C750x420
25:14
C750x500
3:2
C750x600
5:4
C750x620
75:62
C750x750
1:1
C750x800
15:16
C750x860
75:86
C750x900
5:6
C750x960
25:32
C750x1000
3:4

C760

C760x400
19:10
C760x470
76:47
C760x480
19:12
C760x630
76:63

C770

C770x500
77:50

C800

C800x270
80:27
C800x400
2:1
C800x500
8:5
C800x600
4:3
C800x800
1:1

C820

C820x870
82:87

C860

C860x860
1:1

C900

C900x380
45:19
C900x450
2:1

C960

C960x300
16:5
C960x320
3:1
C960x330
32:11
C960x350
96:35
C960x360
8:3
C960x420
16:7
C960x480
2:1
C960x520
24:13
C960x540
16:9
C960x640
3:2
C960x720
4:3
C960x960
1:1

C1000

C1000x380
50:19
C1000x500
2:1
C1000x800
5:4
C1000x1000
1:1

 

728x90
반응형