引导程序4中具有固定高度的响应式卡片图像

Question

例如，我有一个分辨率为760x270的图像，但是该比例使它看起来太细了，我希望它看起来更像一个正方形。 但是，例如，如果我放置一个分辨率为760x500的方形图像，则希望它仍然适合并且不变形。 我怎样才能做到这一点？

<div class="col-xs-6 col-md-4">
                        <div class="card">
                            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Card image cap">
                            <h4 class="card-title">Title</h4>
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on </p>
                                10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div>
                            </div>
                        </div>
                    </div><!--/span-->

Answer 1

您可以使用“填充技巧”使用包装器强制1：1比例，然后将图像绝对定位在包装器中，以使其居中并占据包装器高度的100％（运行后单击“整页”该片段以调整窗口大小）：

 .wrapper { position: relative; overflow: hidden; } .wrapper:after { content: ''; display: block; padding-top: 100%; } .wrapper img { width: auto; height: 100%; max-width: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-4"> <div class="card"> <div class="wrapper"> <img class="card-img-top img-fluid" src="//placehold.it/760x270" alt="Card image cap"> </div> <h4 class="card-title">Title</h4> <div class="card-body"> <p class="card-text">Some quick example text to build on </p> 10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> </div> </div> </div> <div class="col-xs-6 col-md-4"> <div class="card"> <div class="wrapper"> <img class="card-img-top img-fluid" src="//placehold.it/760x500" alt="Card image cap"> </div> <h4 class="card-title">Title</h4> <div class="card-body"> <p class="card-text">Some quick example text to build on </p> 10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> </div> </div> </div> </div> </div> 

并不是说这是1：1的比例。 要调整此比率，请以百分比计算。 对于4：3，这将是3 / 4 = 0.75 。 0.75个百分比为75% 。 您可以将其用作.wrapper:after的padding-top值。