مشکل با عکس در طراحی صفحه

 <div class="row">
            <div class="col-md-۴">
                <div class="card">
                    <img src="img/Master_study.jpg" alt="book" class="img-fluid">
                    <div class="btn-box">
                        <button class="btn btn-warning rounded-pill">۱۲۰,۰۰۰ ریال</button>
                    </div>
                    <div class="card-body text-right pb-۴ p-۰">
                        <h۵ class="card-title">شکستن تقدیر </h۵>
                        <p class="card-text text-muted pb-۴"> جیمز هالیس</p>
                        <hr class="hr_style">

                        <a href="#" class="btn btn-danger mt-۳ btn_circle d-flex align-items-center justify-content-center">
                            <i class="fas fa-arrow-left "></i>
                        </a>
                    </div>
                </div>
            </div>

در کد بالا به تگ margin-top: -۵rem ،image اختصاص دادم و به تگ padding: ۱rem، card
به صورت امتحانی هنگام طراحی تصویری را انتخاب کرده
بودم ولی الان میخوام تصویر اصلی رو قرار بدم ولیکن مشکل اینجاست که ارتفاع تصویر بزرگتر میشود و باعث بزرگتر شدن
ارتفاع card میشود ، که من نمیخوام این اتفاق بیفتد چون ظاهرش به هم میریزه. لطفا در صورت امکان راهنمایی بفرمایید.
در ضمن به تصویر img-fluidاختصاص دادم .