レイヤのアスペクト比(縦横比)を固定して維持する方法を説明します。
* アスペクト比を固定できるのは簡易板のみです
では、以下に手順を説明します。
➊ 簡易板を作成します。
➋ 維持したい比率に合わせ縦横を px単位で設定します。(下図の例は3:2)
➌ アスペクト比をロック(固定)します。
➍ 横幅の単位をブラウザ幅または親レイヤに対する相対値(vwまたは%)にします。
➎ 相対値(vwまたは%)で希望のサイズに指定したら完了です。
❻ プレビューでブラウザ幅を動かしながらアスペクト比が保持されているか確認します。
【応用】 レスポンシブな正円をつくる
レイヤで正円を作り、アスペクト比を固定してレスポンシブに対応させる方法です。
➊ レイヤの縦横サイズを px 単位で同値に設定します。(下図の例は 500 × 500)
➋ スタイルパネル 「枠と背景」 から 「角丸」 をクリックし、単位を%にします。
* px単位だとレスポンシブに対応できません。
➌ 角丸を50%に指定して正円を作ります。
(50%以外はレスポンシブに形を保持できません)
➍ 正円が完成したら上の 「レイヤのアスペクト比を固定する」 の手順 ➌ に進みます。