如果包含视频，如何均衡 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 {

    width: 100%;

    height: 15vw;

    object-fit: cover;

}