|
|
| 27번째 줄: |
27번째 줄: |
| |} | | |} |
|
| |
|
| ----
| | '''이미지의 {{u|높이}}를 조정하고 싶을 때''' 이 틀을 응용할 수 있는데, 자세한 방법은 [[연습장:Kimchan/연구]] 문서의 [[연습장:Kimchan/연구#팁23|23번 팁]]을 참고하십시오. |
| | |
| 다음과 같은 상황에서 응용할 수 있습니다.
| |
| | |
| ↓
| |
| | |
| '''{{++1|이미지의 {{u|높이}}를 조정하고 싶을 때}}''' | |
| | |
| 미디어위키 문법으로 이미지를 삽입할 때 이미지의 크기는 반드시 너비만 조정이 가능합니다. 하지만 나는 높이를 조정하고 싶은데, 너비와 높이의 비율이 1:1로 같은 이미지일 경우 상관이 없지만 그렇지 않을 경우 다소 난감하죠. 그때 이렇게 사용할 수 있습니다.
| |
| | |
| ex) 높이 50px의 [[:파일:Eipellus.png]]
| |
| | |
| <pre>[[파일:Eipellus.png|{{#expr:{{가로세로비|1440|480|50}}round0}}px|border]]</pre>
| |
| | |
| {|{{style|class=wiki|border: none;}}
| |
| |-
| |
| |{{style|border: none;}}|<span class="image-border-color-ddd">[[파일:Eipellus.png|{{#expr:{{가로세로비|1440|480|50}}round0}}px|border]]</span>{{#css: .image-border-color-ddd .mw-image-border .mw-file-element { border: 1px solid #ddd!important; } }}
| |
| |{{style|border: none;}}|<div style="display: inline-block; width: 30px; height: 50px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;"><div style="display: inline-block; height: 100%; border-right: 1px solid #ddd;"></div></div>
| |
| |-
| |
| |{{style|colspan=2|align=center|border: none;}}|우측: 비교용 50px 높이
| |
| |}
| |
| | |
| # 먼저 삽입하려는 이미지의 너비와 높이를 조사합니다. 이는 이미지 문서로 들어가면 볼 수 있습니다.
| |
| # 원래 이미지 문법의 너비 자리에 <nowiki>{{</nowiki>{{exhide|type=jwiki|틀:가로세로비|가로세로비}}<nowiki>}}</nowiki>에서 이미지의 너비와 높이를 넣고 원하는 높이 값을 넣습니다.
| |
| # 이미지의 너비와 높이 비율에 맞추어 입력한 높이 값에 따른 너비를 출력하게 됩니다.
| |
| # 소수점이 너무 길면 이미지 문법에서 너비 값 자체를 무시해 버리므로, <syntaxhighlight lang="html+handlebars" inline="">{{#expr}}</syntaxhighlight>의 round 구문{{툴팁|?|round 오른쪽에 있는 숫자만큼 소수점 아래에서 반올림하는 구문. 즉 {{code|round 1}}이면 소수점 일의 자리까지 보여지고, {{code|round 3}}이면 소수점 백의 자리까지 보여진다.}}을 이용해 소수점을 제한합니다.
| |
|
| |
|
| {{김찬 제작 틀}} | | {{김찬 제작 틀}} |
