Images stretched in bootstrap myCarousel

HTML & CSS
1

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?

slideshow-images-stretched-issue

2

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

1 Like
3

Glad you solved it :slight_smile:

I find the best things with sliders is to remove them from small screens altogether or replace with a small image. Most sliders break my iphone or look really bad (even the good ones) and are a real nuisance in trying to get to the real content on a slow connection.

Also remember for next time if you want quicker help with a problem then we need either a link to the problem page or a working example that demonstrates the problem.

It’s almost impossible to debug narrative :slight_smile:

3 Likes
4

I was going to suggest removing it all together from smaller screens as I think that is the best solution as well but the client is quite picky and been a nightmare with this website and know he will say it needs to be on there

Sorry yeah next time I will post a link to the site or upload the coding to pastebin or something similar to show the issue

1 Like
5

Yes had a few of those in my time :slight_smile: (I got rid of them in the end for an easier life)

2 Likes
6

I’m dreading it to be honest when it goes live as no doubt will be loads of changes due to the pickiness, at times I have thought it’s not worth the stress

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.