Results 1 to 3 of 3

Thread: Images stretched in bootstrap myCarousel

  1. #1
    Join Date
    May 2012
    Posts
    214
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Images stretched in bootstrap myCarousel

    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?

    Click image for larger version. 

Name:	slideshow-images-stretched-issue.jpg 
Views:	15 
Size:	75.0 KB 
ID:	6341

  2. #2
    Join Date
    May 2012
    Posts
    214
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    UPDATE: Think I have solved it using the following CSS

    Code:
    .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

  3. #3
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Conveyor Belt Slide show...Images are stretched
    By Ponder in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-06-2012, 04:39 PM
  2. Stretched CSS Background
    By onestopplay in forum CSS
    Replies: 1
    Last Post: 10-31-2009, 02:59 PM
  3. Resolved Is there a fix for the IE Stretched Button Bug?
    By jlizarraga in forum CSS
    Replies: 3
    Last Post: 11-24-2008, 06:46 AM
  4. Help with stretched Background
    By pattie1213 in forum HTML
    Replies: 3
    Last Post: 07-05-2008, 05:54 PM
  5. UL Stretched Out In IE
    By alexjewell in forum JavaScript
    Replies: 1
    Last Post: 04-11-2006, 01:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •