p
このページでは、画像の縦横の比率の変更の仕方を説明します。

p
画像の縦横の比率を変更するには、

s
テンプレートのCSSファイルをテキストエディタで開いでください。

s
hl^ <<< height/width ratio $ を含む行を見つけてください。

code
.%css-ctar% .aiin-btn {
	position:relative;
	b^padding-bottom$:r^80%$; /* hl^<<< height/width ratio$ */
	width:100%;
/code

s
この行にある b^padding-bottom:$ の後に続くパーセンテージが、「画像の横幅に対する画像の高さの割合」です。このパーセンテージを変更します。

p
例えば、下図のような形に変更するとします。この長方形の高さは横幅の半分(50%)です。

raw
<div style="margin:20px auto;border:3px solid black;width:200px;height:100px;"></div>
/raw

p
この場合、以下のようにr^50%$と指定します。

code
padding-bottom:r^50%$; /* <<< height/width ratio  */
/code

p
次の例では、高さは横幅の二倍(200%)です。

raw
<div style="margin:20px auto;border:3px solid black;width:100px;height:200px;"></div>
/raw

p
この場合、以下のようにr^200%$と指定します。

code
padding-bottom:r^200%$; /* <<< height/width ratio  */
/code

p
次の例では、高さが横幅と同じです。

raw
<div style="margin:20px auto;border:3px solid black;width:150px;height:150px;"></div>
/raw

p
この場合、以下のようにr^100%$と指定します。

code
padding-bottom:r^100%$; /* <<< height/width ratio  */
/code

s
ファイルを保存して完了です。

tpl
std