General solution for Bootstrap 5. And I'm adding a particular solution to OP's problem at the end of my answer.
Resizing seems not to be an easy task on some situations. I haven't found any built-in implementation in BS5 for specific image resizing using Bootstrap classes.
The best solution I've found is handling images as they were any other HTML element (a span
or a div
element).
GENERAL SOLUTION
Use this snippet
<img
src="~/Content/images/YourImage.jpg"
class="img-fluid mx-auto mx-lg-0 h-100 col-8 col-sm-6 col-md-4 col-lg-1 my-auto"
>
NOTE: This is just a general example. Adapt it to your needs.
Explanation (more or less this is what happens)
- BASIC SET UP (for Bootstrap responsive image):
img-fluid
: Image is made responsive. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
mx-auto
: centers the image in the horizontal axis, for phone views. Left and right margins are set to auto
mx-lg-0
: When the lg break-point is reached, the margin to both sides are set to 0.
- USING COLUMNS (resize to your needs):
h-100
: Image height is set to 100% relative to the parent. This should preserve the correct aspect ratio.
col-8
: At the smallest screen size, image will occupy 8 columns.
col-sm-6
: After the small screen break point (see links at the section below), image will occupy 6 columns.
col-md-4
: At mid sized screens, 4 columns.
col-lg-1
: At large sized screens, 1 column.
my-auto
: This is for vertical centering (optional).
Remember, you'll set the columns occupied at your own will and pleasure.
Result

SOLUTION FOR THIS QUESTION
The main problem with your code is that you're missing classes. Remember: Bootstrap is mostly about using classes correctly. You should think twice if you're using the built-in classes correctly before putting in your own CSS code.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
<img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
<img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
<img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
<img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>
For responsiveness on different screen sizes, take a look to the general solution above.
Links