HTML/CSS 画像でマスクした画像とテキスト群の横並び マスクした画像の幅が変わらない テキストの上下の余白が開き過ぎる

Question

HTML/CSSでデザインカンプからLPを制作しています。

その中で、アメーバ状の画像でマスクした画像が左側に、テキスト群が右側にという横並びがあります。それについてわからない点が2点あります。

1点目は、アメーバ状の画像の少しだけ内側にマスクされる側の画像を置くことでアメーバの縁を少し表示させたいのですが、その方法がわかりません。マスクには、SVGを用いたclip-pathを使っています。

2点目は、右側のテキスト群が左側のテキスト画像の高さに合わせてしまうため、テキストの上下の余白が開きすぎてしまうのですが、その改善方法がわかりません。文字数の関係で700pxあればいけるかと思いましたが、タブレットサイズほどになるとborderからはみ出ました。
＊2点目はheightをなくしたら思い通りになりました。ありがとうございました‼︎

著作権などの関係で実際のデザインがお見せできないため、手書きのイメージを添付します。
拙いコードと説明文ですが、ご教示いただけると非常に嬉しいです。

<!--SVGはブラウザ上は見えないようにしています。-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 693.22 726.73">
    <clipPath id = "ameba1">
　　　　　　　　　　　　　　　　<path class="cls-1" d="数字羅列"/> 
    </clipPath>
</svg>

<div>
    <img src = "マスクしたい画像">
    <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
　　　  　</p>
</div>

div{
    display:flex;
}
img{
    clip-path:url(#ameba1);
    width:50%;
}
p{
    align-items: center;
    border: 2rem solid #7D1D17;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin: auto;
    padding: 1rem;
    height: 700px;
    width: 50%;
}

Comments

[recal]

>>右側のテキスト群が左側のテキストの高さ
左側にも画像以外にテキストがあるのでしょうか？

>>文字数の関係で700pxあればいけるかと思いましたが
右テキストボックスには高さを必ず指定しなければいけないのでしょうか？

[TERASHU_]

>>>右テキストボックスには高さを必ず指定しなければいけないのでしょうか？

できるだけ上下の余白ができないように、ギリギリを攻めた高さを設定しました。
必ず指定しなれければいけないわけではないと思います。

[Lhankor_Mhy]

ソースにある「<img src = "マスクしたい画像">」は「アメーバ状の画像」ですか？　それとも「マスクされる側の画像」ですか？

[TERASHU_]

「マスクされる側の画像」です。

[Lhankor_Mhy]

「アメーバ状の画像」は、ご提示のソースで言うと、どれですか？

[TERASHU_]

SVGの部分とimg要素のclip-path:url（）;です。
SVGの中のclipPathタグにidを指定し、そのidを参照してclip-pathで表示させたいです。

[Lhankor_Mhy]

「アメーバ状の画像」＝パス
「マスクされる側の画像」＝マスクしたい画像
とすると、
「アメーバの縁」とはパスの縁、つまりストロークのこと、という理解で合っていますか？
そうだとすると、「アメーバ状の画像の少しだけ内側にマスクされる側の画像を置く」とは、どのような操作のことをおっしゃっていますか？

[TERASHU_]

私がやりたいのは、
アメーバ状にくり抜いた画像にアメーバの色の線を縁取りのようにつけることと、くり抜いた画像の高さと幅を自由に変えることです。
くり抜く過程で何かしらの指定を使ってアメーバの縁を残せるならいいなと思うのですがそれはできないんでしょうか…

[Lhankor_Mhy]

つまり、「マスクされる側の画像」にはもともと縁取りがあって、「アメーバ状の画像」よりも「マスクされる側の画像」を少し小さくすることによって、その部分をマスクから外したい、という理解で合っていますか？

[TERASHU_]

いえ、「マスクされる側の画像」に縁取りはないです！
よく考えたら「アメーバ状の画像」はあくまでマスクする形だから、元のアメーバの色が残ったりはしないですよね

[TERASHU_]

とりあえず、「マスクされる側の画像」をマスクしてしまって、そのあとにその画像の後ろに一回り大きくした「アメーバ状の画像」を配置するしかないですか？

[Lhankor_Mhy]

たとえば、マスクのパスのストロークに色を付けて重ねるのではダメなのですか？

[Lhankor_Mhy]

ストロークではダメで、ストロークの外側に縁をつけたいということなのかな……？

[TERASHU_]

ストロークって、borderとかoutlineでつける枠線みたいなことですか？

[Lhankor_Mhy]

大雑把に言えばそんなようなものではあるのですが、上手く伝わっていない気がしますね……
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke

[TERASHU_]

属性があるんですね！
恥ずかしながら知りませんでした。
ありがとうございます。