Size of images in slider bootstrap 4

[shabzadeh97]

My slider code is as follows:

<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        @foreach (var item in Model)
        {
            string active = "";
            if (item.Id == Model.FirstOrDefault().Id)
            {
                active = "active";

            }

        <div class="carousel-item @active">
            <img class="img-fluid" src=@Url.Content("~/images/sliders/" + item.ImageName) />
           
        </div>

        }
        </div>
    <a class="carousel-control-prev" data-slide="prev" href="#demo">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" data-slide="next" href="#demo">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</div>

The Container size is 1140 * 640
My Images 640 * 640
carousel.slide 1110 * 640
And I want to have a slider in size of 1110 * 400 . Without my photos dropping in quality. Please give me some guidance on what to do?

[TechnoBear]

@shabzadeh97

My Images 640 * 640
carousel.slide 1110 * 640
And I want to have a slider in size of 1110 * 400 . Without my photos dropping in quality.

What you want is not possible. You can’t scale images up in size without loss of quality, and scaling by that amount will give a very poor result. You also can’t scale a square image to a different aspect ratio without distortion.

Or have I misunderstood what you intend? Do you simply want the square image placed in the centre of the container? If that’s the case, then please show the CSS for the slideshow, and explain exactly what help you need.

[shabzadeh97]

@TechnoBear

What you want is not possible. You can’t scale images up in size without loss of quality, and scaling by that amount will give a very poor result. You also can’t scale a square image to a different aspect ratio without distortion.

yes I want scale images up in size.

[WebMachine]

As @TechnoBear said, if you want the images to be that large without losing quality, then your original images must be at least 1110px by 400 px. And if they are a different proportion of width to height, they will look distorted.

[PaulOB]

@shabzadeh97

And I want to have a slider in size of 1110 * 400 . Without my photos dropping in quality. Please give me some guidance on what to do?

The simplest answer is to supply images from your paint package that are 1110px x 400px already. Then you have no need to distort them or lose their quality.

If you want to make random size images fill your 1100 x 400 container then you can only do that using the object-fit:cover css property/value and that will ensure the image covers the area. It will however result in the image being clipped on one dimension unless the aspect ratio happens to match your container size.

object-fit is only supported in modern browsers (not ie11).

Any other method is beyond the realms of logical mathematics and common sense. You simply cannot stretch a ‘real world image’ to fit width and height unless you maintain aspect ratio at the same time or the image becomes stretched in one direction.