css - 如何使包裹的边框保持比例以及如何将图像裁剪为相同大小并保持响应能力？CSS，引导程序

Question

我正在与引导程序的网格系统作斗争。我希望蓝色边框（.outer-link）包裹图像（.image-link）并随着页面大小的变化与图像保持相同的比例。我将边框与图像分开，因为我希望图像和边框都是圆形的，但是图像和边框之间有一些填充。（我愿意采取更有效的方式来做到这一点。）

此外，如何让不同原始尺寸的图像将自己裁剪为相同尺寸，同时仍保持其响应能力？

    <section class="fluid-container m-3 justify-content-center">
            <div class="row align-items-center justify-content-center">
                <div class="col-sm-8 col-md-3 order-2 order-md-1 dish-image">
                    <a class="outer-link align-items-center" href="../maindishes/butternut-chili.html">
                        <img class="img-fluid image-link" src="https://images.unsplash.com/photo-1585029780574-65af8aa61abd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                            alt="picture of dish">
                    </a>
                </div>
                <h2 class="col-md-3 dish-name order-1 order-md-2 text-md-start text-center">
                    <a class="text-link" href="../maindishes/butternut-chili.html">Butternut Squash and Farro Chili</a>
                </h2>
                <div class="col-sm-8 col-md-3 order-4 order-md-3 dish-image">
                    <a class="outer-link" href="../maindishes/african-stew.html">
                        <img class="img-fluid image-link" src="https://images.unsplash.com/photo-1582576163090-09d3b6f8a969?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1051&q=80"
                            alt="picture of dish">
                    </a>
                </div>
                <h2 id="african-stew"
                    class="col-md-3 dish-name dish-name-2 order-3 order-md-4 text-md-start text-center">
                    <a class="text-link" href="../maindishes/african-stew.html"> Slow Cooked North African Stew with
                        Couscous</a>
                </h2>
            </div>
        </section>

.outer-link {
    border: #2EC4B6 solid 3px;
    padding: 5px;
    border-radius: 5px;
    line-height: 0;
}

.image-link {
  border-radius: 5px;
}

标签： cssbootstrap-4