可変の親要素の高さを子孫要素へ継承していき、最終的にimgに高さを付与したい。

前提・実現したいこと

実現したいこと
可変の親要素の高さを、孫にあたるimgタグに付与したい。
結果的に実現は既にしているが、考え方が合っているか知りたいです。

前提
imgタグ内の画像が親要素の高さを飛び出してしまうのを回避するために、object-fit: cover;を指定します。
ですが、レスポンシブなので絶対値のheightは指定したくありません。可変の親要素の高さに合わせたいと思っています。
そこでimgタグには以下のような記述をしています。(max-width:100% height:autoはbaseで指定しています。)

img {
width: 100%;
height: 100%;
object-fit: cover;
}

この時に親要素が直ぐ上にあればいいのですが、以下のようなケースの時。
可変の親要素である<li class="Interview__item">の高さを順番に受け継ぐために、
その子孫の<a>と<p>にもheight:100%を1個1個指定しないといけないのでしょうか？

<li class="Interview__item">
        <a href="">
           <p><img src="dist/images/top_interview_01.png" alt=""></p>
             <div class="Interview__title">
                <h3 class="Interview__name"></h3>
                <p class="Interview__caption"></p>
             </div>
        </a>
   </li>

結果的に以下のようなコードで望む結果が得られたのですが、見てくれが悪く、正しいのか不安になっています。
初学者で訳のわからない質問ですみませんが、お付き合い頂けますと嬉しいです。

&__item {　//この可変の親要素の高さをimgまで与えたい
        position: relative;
        flex-basis: 30%;
        flex-shrink: 0;
        background: linear-gradient(to right, #106fbf, #11bef7);

        & a {
            width: 100%;
            height: 100%;

            & p {
                width: 100%;
                height: 100%;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }