•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기

하트위키:문법 도움말(비교)

r3 vs r4
......
123123||
124124||<-2> 모서리 곡률 지정 || {{{border-radius=픽셀}}} ||이미지 파일의 모서리 곡률을 지정할 수 있는 문법입니다. ||
125125||<-2> 픽셀화 || {{{rendering=pixelated}}} ||비트맵 이미지는 자동으로 [[안티에일리어싱]]이 적용되어 나오는데, 이를 적용되지 않게 해 줍니다. 픽셀의 수가 적은 비트맵 이미지를 확대하면 이 [[안티에일리어싱]]으로 인해 이미지가 흐리게 나오는데, 이를 선명하게 표시하여야 할 때 유용한 속성입니다. ||
126||<-2><|5> 크기 맞춤 || {{{object-fit=fill}}} ||{{{#!wiki style="display: flex"
127{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
128[[파일:로고1.png|width=120&height=120&object-fit=fill]]
129}}} {{{#!wiki style="margin-top: -15px"
130{{{원본: 200x100
131127매개변수: width=120&height=120&object-fit=fill
132128}}} 지정된 너비와 높이에 맞게 이미지가 늘려서 조절됩니다. 이미지가 왜곡될 수 있습니다. 기본값입니다. svg 파일은 {{{object-fit=contain}}}으로 표시됩니다.}}}}}} ||
133129|| {{{object-fit=contain}}} ||{{{#!wiki style="display: flex"
134130{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
135131[[파일:로고1.png|width=120&height=120&object-fit=contain]]
136132}}} {{{#!wiki style="margin-top: -15px"
137133{{{원본: 200x100
138134매개변수: width=120&height=120&object-fit=contain
139135}}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이 내에 포함되도록 조절됩니다. 여백이 생길 수 있습니다.}}}}}} ||
140136|| {{{object-fit=cover}}} ||{{{#!wiki style="display: flex"
141137{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
142138[[파일:로고1.png|width=120&height=120&object-fit=cover]]
143139}}} {{{#!wiki style="margin-top: -15px"
144140{{{원본: 200x100
145141매개변수: width=120&height=120&object-fit=cover
146142}}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이를 모두 채우도록 조절됩니다. 이미지가 잘릴 수 있습니다.}}}}}} ||
147143|| {{{object-fit=none}}} ||{{{#!wiki style="display: flex"
148144{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
149145[[파일:로고1.png|width=120&height=120&object-fit=none]]
150146}}} {{{#!wiki style="margin-top: -15px"
151147{{{원본: 200x100
152148매개변수: width=120&height=120&object-fit=none
153149}}} 이미지의 원본 크기[* 예시 이미지의 실제 이미지 크기는 400x200인데 하트위키 엔진 이미지 최적화로 인해 0.5배인 200x100이 이미지 소스로 사용되어 200x100을 유지합니다.]를 유지하면서 지정된 너비와 높이 가운데에 위치됩니다.}}}}}} ||
154150|| {{{object-fit=scale-down}}} ||{{{#!wiki style="display: flex"
155151{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
156152[[파일:로고1.png|width=120&height=120&object-fit=scale-down]]
157153}}} {{{#!wiki style="margin-top: -15px"
158154{{{원본: 200x100
159155매개변수: width=120&height=120&object-fit=scale-down
160156}}} none과 contain 중 크기가 작은 쪽으로 선택됩니다. 이미지 크기를 늘리지 않으면서 잘리지 않게 포함할 때 사용합니다.}}}}}} ||
126
161127}}}
162128모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다.
163129{{{||<width=숫자>[[파일:example.png|width=100%]]||
......