Bootstrap Card images are not contained perfectly around corners - html

Question

I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/