Stretch and fill image in Bootstrap carousel

Question

I am using bootstrap carousal and having some problem with image height and width. Even though I define it in the img attribute it still displays a

Answer 1

img tag using "object-fit: cover" property

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}            

.item {
    width: 100%;
    height: 100%;                
}

.item img {
    object-fit: cover;
/*
    object-fit: fill;
    object-fit: none;
    object-fit: contain;
    object-fit: scale-down;
*/
}

        


    


        
        

            

            

            

        

        
        


            

                          
            

            

                          
            

            

                          
            

        

        
        
            
            Previous
        
        
            
            Next
        

    

Codepen