html - Carousell and fixed image size

Question

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.

Answer 1

I hope you are doing well

I have one 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>