親要素の縦幅をコントロールするにはどうしたらいいですか (レスポンシブ)

Question

画像を縮小すると親要素に指定している枠のシャドーが下に伸びて 画像と枠の間に隙間ができてしまいます。

質問させて頂きます
只今、レスポンシブ設定を学んでいるところです。
要素の縦幅をコントロールする方法を教えて頂けると嬉しいです。

cssに設定したことは次の通りです
1, 6枚の画像が重なるように portada-1 に relative
portada-1 img に absolute を指定しました
※子要素のimg に全部 absolute を指定すると画像が消えると聞いたことがあるのですが、
参考にさせて頂いたホームページのやり方だと 画像が現れ ふんわり表示されます
なぜか分かりませんが出来ました。
参考にしたページ

2, その画像の外にシャドーをつけたかったので div で画像を囲いました。(portada-1)

3, 画像はレスポンシブに対応するようにwithd を100％にしました

問題はここからでして、
画面を縮小すると portada-1 の高さが portada-base に反応してるのか、portada-1 の枠のシャドーが画像と一緒に縮小してくれません
一緒に縮小してくれると、レスポンシブの設定が随分楽になるので助かるのですが・・・

いい方法があったら 教えて頂きたいと思い質問させて頂きました。
どなたかご存じでしたら よろしくお願いいたします。

試してみたこと

1, 枠のシャドーを画像(portada-1 img)に直接設定してみましたが 効果がありません

2, portada-1 img に height 100% の指定をしてみました。枠のシャドーは画像と一緒に 縮小されますが、縮小と共に 画像が下にびよ～んと伸びてしまうので、ふさわしいくないと分かりました

3, portada-1 (親要素) の横幅をpx で指定せず、パーセントでしていしてみました width: 45%;
すると画像と一緒に枠のシャドーも縮小してくれるので、height にもパーセントで指定してみましたが なぜか画像が消えしまいます。

4, portada-1 (親要素) のheight を299px にすると パソコン用画面では丁度いいサイズです。
なので max-height と min-height を試してみましたが効果がありません。

5, portada-1 (親要素) に display: block を指定してみましたが 効果がありませんでした。

6, 写真を重ねる別の方法も試してみました
参考にしたページ
一枚目以降の画像にbsoluteを指定する方法です。
この方法ですと、枠のシャドーは画像と一緒に収縮してくれますが、
portada-2 の要素を flexで横に持っていき、画面を収縮させると 枠のシャドーは画像と一緒に収縮してくれません。
アニメーションは 最初に参考にした(https://www.esz.co.jp/blog/185.html) と組み合わせてみましたが、映像がうまく枠の中にはまりません。

表示画面を添付させて頂きます

↓こちらはパソコンサイズの表示です。枠のシャドーが写真とフィットしています

↓こちらは表示を収縮した時です。 枠のシャドーは写真とフィットしてくれません

HTMLコード
<!--portada-1 と portada-2 を横並びにする為 ここから-->
<section class="portada-base margin-auto flex">
    <!--portada-1 写真ここから-->
            <section class="portada-1 margin-auto">
                <img src="./../imagen/portada/sushi.png" alt="sushi" >
                <img src="./../imagen/portada/ramen.png" alt="ramen" >
                <img src="./../imagen/portada/edamame.png" alt="edamame" >
                <img src="./../imagen/portada/bento.png" alt="bento" >
                <img src="./../imagen/portada/tempura.png" alt="tempura" >
                <img src="./../imagen/portada/tradicional.png" alt="tradicional" >
            </section>
    <!--portada-1 写真ここまで-->

    <!-- portada-2 presentacion ここから-->
      <section class="portada-2 margin-auto">
        <h1 class="letra-rosa">Presentación</h1>
        <p class="ps-contenido letra-verde">
              Si vives en otro país, seguramente te será difícil
              encontrar los mismos ingredientes que se usan en Japón,
              pero no te preocupes porque muchos de ellos se pueden sustitulir
              y podrás probar la comida japonesa en tu casa.
              Así que te presento esta web, que se llama <span> "ComidaJPC". </span>
              Aquí encontrarás no solo platos tradicionales y elaborados,
              sino también las recetas más sencillas del día a día.
        </p>
      </section>
      <!--portada-2 presentacionここまで-->

</section>
<!--portada-1 と portada-2 を横並びにする為 ここまで-->

アニメーションの設定が影響してるかもしれないので、
アニメーションのCSSも書かせて頂きます。

CSSコード
.portada-base {width: 90%; max-width: 960px;}

/*写真の枠*/
.portada-1 {
            display: block;
            position: relative;
            width: 45%;
            height: 299px;
            margin-left: auto;
            overflow: hidden;  
            box-shadow: 0 0 30px rgb(233, 127, 14);
            border-radius: 80px 0px 80px 0px;
           }

/*portada-1 アニメーション*/
.portada-1 img {
                position: absolute; 
                width: 100%;
                animation: anime 36s  infinite;
                z-index: 10; opacity: 0; 
               }

/*写真の表示開始時間の設定*/
.portada-1 :nth-of-type(2)  
{ animation-delay: 6s; }    

.portada-1 :nth-of-type(3)
{ animation-delay: 12s;}

.portada-1 :nth-of-type(4)
{ animation-delay: 18s;}

.portada-1 :nth-of-type(5)
{ animation-delay: 24s;}

.portada-1 :nth-of-type(6)
{ animation-delay: 30s;}

/*写真アニメーション ふわっと表示*/
@keyframes anime { 
0%{opacity: 0;}
8%{opacity: 1;}
17%{opacity: 1;}
25%{opacity: 0;
transform: scale(1.2); 
z-index: 9;}  
100%{opacity: 0;}
}

Answer 1

追記　回答の上下を入れ替えました

おそらくdisplay:flex;してますよね？
portada-1に当てるheightをheight: calc(120px + 2vw);とかにすれば、
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
※レスポンシブというかリキッドデザインのような気もしますが。

---

以下蛇足です。
お望みの方法と異なるかもしれませんが、
portada-1、2をflexで横並びにするのをやめて、
portada-1にfloat:left;を当てて、
portada-1の高さは画像の高さに指定して、
portada-1の上下の位置はmarginで調節して…

という感じの実装はいかがでしょうか？
※注意点はテキストが回り込んでしまうことです。

Comments

[yukiko-yukiko]

ご回答くださってありがとうございます!
すぐに返答できなくてすみません。
素人なので、焦らず慎重にアドバイスの内容理解しながら試していると 随分時間かたってしまいました(汗)

amiya-se様のお陰で 解決出来ました!
どういう訳か float:left; にするとデザインが崩れてしまい、flexのまま設定しました。
そして height: calc(120px + 2vw); で高さの調節と img を 100％から 120％に引き上げるなどしながら
枠のなかに画像を収めることができ、要素の高さもコントロールできるようになりました!

ほんとうにありがとうございます! 助かりました!