上下のConstraintsの制約をつけると画像の高さが変形する

Question

###問題点
画像を配置し、上と下のConstraintsをつけると勝手に画像の高さが変わってしまいます。
スクリーンショットでご説明します。

1.まずこのように画像を配置します。

2.中央に配置されるよう右左にConstraintsをつけます。
ここまでは、うまくできます。

3.上（あるいは下）にConstraintsをつけると、画像の高さが伸びてしまいます。

結果、上へのConstraintsは叶うのですが、
画像が伸びてしまったことにより、先ほどの配置とは異なってしまいます。
また、それをMain.storyboard上で移動させても、デバイス変える度に配置場所が異なってしまいます。

###実現したい事
上へのConstraintsをつけた際に、高さの変化を無くしたいです。
iphoneやipadのデバイス変更をしても、画像の配置に極端な違いを出さないようにしたいです。

Answer 1

あるビューの上下に対して定数値のconstraintを付けるということは、上側と下側の空きスペースのサイズを固定したということですから、可変な部分、つまりビューの高さが変更されることになります。

上へのConstraintsをつけた際に、高さの変化を無くしたいです。

この場合は、TopとHeightに対してconstraintを付けてBottomに付けなければ、サイズが変化した場合はBottomの空間が可変になり上固定にできます。

Leading, Trainingにconstraintを付けてますから、左右は伸びると思います。
縦横の比率を保ちたい場合はHeightの代わりにアスペクトのconstraintを追加することで、幅の変化に合わせて高さも変化するようにできます。

ビューのサイズは解像度によらず固定で、上側能力左右中央に表示する場合は、Leading,Trainingは指定せずに、Top, Horizontal Center, Width, Heightを指定すればいいです。

Comments

[tomtom1]

大変勉強になりました！できることなら二つともベストアンサーにしたいです。ありがとうございます。

Answer 2

画像に対して Aspect Ratio のConstraint をつけるとどうでしょう？

Comments

[tomtom1]

即解決しました。ありがとうございます。