Images stretched in bootstrap myCarousel

[ianhaney]

I am doing a site for a client and it's using myCarousel on the home page and on full view, the slideshow images are fine but on mobile view, the images are stretched vertically due to having height: 180px; The slideshow images have 3-5 lines of captions so put that fixed height in but the client is saying they are stretched so I put object-fit: cover in which kind of solved the issue of stretched but it cut off the images either side and the client is not happy with this, I have tried img-responsive which again solves the stretched issue but the captions then do not fit on. I am out of ideas of what to try, I don't think there is anything can be done, can anyone help please?

6341

[ianhaney]

UPDATE: Think I have solved it using the following CSS



.carousel-inner > .item > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: right center;
}
.carousel-inner > .item:nth-of-type(7) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(9) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(10) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(12) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}


It seems to have worked with that CSS

[Afflospark]

Hello,
To rectify that problem you have to change your CSS code.
you have not to need to change your image height but you try to place your image width to 100%. when your site not responsive this will happen so you have to make your site responsive to overcome this issue.