Solution 1 :

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="" alt="image">

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.

Problem :

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") %>' />

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.


Comment posted by

Comment posted by Bzx naga

it broke the carousell navigation

Comment posted by Mhd Alaa Alhaj

post a working code example that reproduces the issue

Comment posted by KuldipKoradia

you are okay with that if some of your image portion will cut after making some solution?