ScrollViewで追加したノードのImageがはみでてしまう

###実現したいこと
ScrollView内に追加したノードのImageが
枠内をはみ出さないようにしたいと思っております。

###前提
VR空間内にアイコンが描かれたPlaneを追加できるようにしています。

追加したPlaneの情報を列挙するために、
VR空間内のメニュー画面の中のScrollViewに
Planeの情報を列挙します。

ScrollViewの内容は以下の通りです。
ノードの情報としてテキスト型の「Number」とImage型の「MarkingKind」を持っています。

アイコンは数種類から選ぶことができ、
追加された際にMarkingKindを選択したアイコンのマテリアルに変更します。
１種類のノード（Prefab化済）のマテリアルを切り替えます。

###発生している問題
ノードを追加していくと、Imageで作成している部分が下図のように
ScrollViewの範囲をはみ出してしまいます。
左側のテキスト部分は枠内にきちんと収まっております。

どうすればテキスト部分と同じようにImageも枠内からはみ出さずに
表示できるでしょうか？

###該当のソースコード

C#
1                // Nodeを追加する
2                var item = Instantiate(Node) as RectTransform;
3                item.SetParent(NodeParent.transform, false);
4                // Node情報更新
5                Text text = item.GetComponentInChildren<Text>();
6                if (text.name == "Number")
7                {
8                    // Nodeの名前を変更
9                    // リストのインデックスを選択する
10                    // １からカウント
11                    text.text = string.Format("No.{0}", MarkingList.Count);
12                }
13                item.name = text.text;
14
15                foreach(Image image in item.GetComponentsInChildren<Image>())
16                {
17                    if(image.name == "MarkingKind")
18                    {
19                        // マテリアルを変更（アイコンの画像が変わる）
20                        image.material = MaterialList[MaterialIndex];
21                        Color c = plane.GetComponent<Renderer>().material.color;
22                        image.material.color = new Color(c.r, c.g, c.b, c.a);
23                        break;
24                    }
25                }
26