如果包含视频，如何均衡 card-img 大小

Question

我试图确保卡片组中图片和视频的大小相等

<div class="card-deck">

        <div class="card">

            <a href="#"><img src="./../trier.jpg" alt="foto" class="card-img img-fluid"></a>

            <div class="card-body">

                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aut quod vero vitae quaerat ipsum at, temporibus odio. Nemo veniam rem consectetur totam debitis officia impedit similique cumque nobis culpa!</p>

            </div>

            <div class="card-footer bg-transparent text-center">

                <p class="text-muted">BLABLABLABLABLABLA</p>

            </div>

        </div>

        <div class="card">

            <a href = "#"><div class="embed-responsive embed-responsive-1by1"><iframe src="./../trialVideo.mp4" class = "card-img img-fluid" controls></iframe></div> </a>

            <div class="card-body">

                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aut quod vero vitae quaerat ipsum at, temporibus odio. Nemo veniam rem consectetur totam debitis officia impedit similique cumque nobis culpa!</p>

            </div>

            <div class="card-footer bg-transparent text-center">

                <p class="text-muted">BLABLABLABLABLABLA</p>

            </div>

        </div>

        <div class="card">

            <a href="#"><img src="./../trier.jpg" alt="foto" class="card-img img-fluid"></a>

            <div class="card-body">

                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aut quod vero vitae quaerat ipsum at, temporibus odio. Nemo veniam rem consectetur totam debitis officia impedit similique cumque nobis culpa!</p>

            </div>

            <div class="card-footer bg-transparent text-center">

                <p class="text-muted">BLABLABLABLABLABLA</p>

            </div>

        </div>

        </div>

我的代码输出：https : //ibb.co/b15gqhZ

Answer 1

在你的 css 中试试这个：.card-img top {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 15vw;&nbsp; &nbsp; object-fit: cover;}