このページでは、画像の縦横の比率の変更の仕方を説明します。
画像の縦横の比率を変更するには、
1 |
テンプレートのCSSファイルをテキストエディタで開いでください。 |
2 |
<<< height/width ratio を含む行を見つけてください。 |
.%css-ctar% .aiin-btn {
position:relative;
padding-bottom:80%; /* <<< height/width ratio */
width:100%;
3 |
この行にある padding-bottom: の後に続くパーセンテージが、「画像の横幅に対する画像の高さの割合」です。このパーセンテージを変更します。 |
例えば、下図のような形に変更するとします。この長方形の高さは横幅の半分(50%)です。
この場合、以下のように50%と指定します。
padding-bottom:50%; /* <<< height/width ratio */
次の例では、高さは横幅の二倍(200%)です。
この場合、以下のように200%と指定します。
padding-bottom:200%; /* <<< height/width ratio */
次の例では、高さが横幅と同じです。
この場合、以下のように100%と指定します。
padding-bottom:100%; /* <<< height/width ratio */
4 |
ファイルを保存して完了です。 |