Menu
I have an image with a resolution of 760x270, for example, but this ratio makes it look too thin and I want it to look more like a square. However, if I put a more square-ish image with a resolution 760x500 for example, I want it to still fit and not distort. How can I do this?
<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-->
458
Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, style=" height: 10rem;" ) or Bootstrap's sizing utilities (for examle, <div class="card h-200"> ).
You can just use height attribute and set it as height: 100vh; I have used 70vh and cards will be fixed height which you have given.
Template Name: Responsive Cards In Bootstrap 4. High Resolution: – Yes. Compatible Browsers: – All Browser. Source Files included: – HTML files (.html),CSS Files, CDN and Images. Cards are most extenuate and important contents in Bootstrap. In the cards have some class which makes your cards more beautiful and attractive.
Add class .img-fluid to make your bootstrap image responsive. It will apply max-width: 100%; and height: auto; to the image, which makes it always fit the parent element.
Bootstrap card provide us a lot of functionality that we can play around. We can also make them responsive and also of fixed size all depends on our need. So the code for the fixed size bootstrap card deck is given below. We have provided the code without using CSS properties so it looks much simpler and easier to understand.
High Resolution: – Yes. Compatible Browsers: – All Browser. Source Files included: – HTML files (.html),CSS Files, CDN and Images. Cards are most extenuate and important contents in Bootstrap. In the cards have some class which makes your cards more beautiful and attractive.
You can force a 1:1 ratio with a wrapper using the "padding trick" and then absolutely position the image in the wrapper so that it is centered and takes up 100% of the height of the wrapper (click "full page" after running the snippet to adjust the window size):
.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>Not that this is for a 1:1 ratio. To adjust this ratio compute it as a percent. For 4:3, this would be 3 / 4 = 0.75. 0.75 as a percent would be 75%. You would use this as the padding-top value of .wrapper:after.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
