I have a solution which help you to solve this issue but after applying this solutions some of your image portion will cut if you are okay with that then bind your image in a div.

Like this example in snippet:

.image_container {
  width: 100%;
  padding-top: 40%; /*height of the image depands on this*/
  overflow: hidden;
  position: relative;
}

.image_container img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}

<div class="image_container">
  <img src="https://i.pinimg.com/originals/1f/87/90/1f8790df8b450fbf5c3b4a6b9db4f822.jpg" alt="image">
</div>

This solution display the center portion of the image and always fill the container and also cut some portion of your image.

Note: please add one extra div class for this, don’t consider carousel-item class as an image container.

I’m new to bootstrap and CSS especially something like carousel
so far this is my code

                <div class="container">
                    <div class="row">
                        <div class="carousel-item <%# Eval("Aclass") %>">
                            <img class='img-fluid w-100' alt="slide Responsive image" src='<%# Eval("ImageValue") %>' />
                        <div/>
                    </div>
                </div>

It works well to show the image but the problem come when the image size are different.

Sometimes I have to scroll up and down to scroll for full image, how do I force it to let say 500 x 500 px image no matter what is the original image size is.