[英]Bootstrap 5 Card wrong height of card with image with fixed height
[英]Responsive card image with fixed height in bootstrap 4
例如,我有一個分辨率為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-->
您可以使用“填充技巧”使用包裝器強制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
值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.